/*
 * ==========================================================================
 * KEYSHU - DESKTOP CSS ONLY
 * ==========================================================================
 * Refactor giữ nguyên phạm vi desktop hiện tại bằng breakpoint min-width: 850px.
 * File đã được làm sạch theo hướng desktop-only:
 * - Loại bỏ toàn bộ media query max-width dành cho mobile/tablet
 * - Giữ lại các animation và breakpoint desktop bổ trợ
 * - Dọn khai báo bị ghi đè an toàn trên cùng selector/context
 * - Chuẩn hóa shorthand và thứ tự declaration để dễ bảo trì
 */


/* =========================================================
   ROOT VARIABLES
========================================================= */
:root {
  /* Brand colors */
  --color-primary: #03b0b1;
  --color-primary-dark: #009b9c;
  --color-primary-deep: #00796b;
  --color-text: #5d6b75;
  --color-heading: #1b4d55;
  --color-heading-strong: #315f66;
  --color-white: #ffffff;
  --color-black: #111111;
  --color-border: #e8eef2;
  --color-border-soft: #edf2f4;
  --color-muted: #8a9ca3;
  --color-muted-2: #b7c2c7;
  --color-rating: #ffae12;

  /* Product colors */
  --color-price: #ee4d2d;
  --color-sale: #ff4545;
  --color-success: #15b37e;

  /* Background colors */
  --color-bg-soft-green: #f0fdf4;
  --color-bg-soft-mint: #ecfdf5;
  --color-bg-soft-blue: #f8fafc;

  /* Font */
  --font-main: "SVN-Gilroy", sans-serif;
  --font-main-alt: "SVN-Gilroy", sans-serif;
  --font-icon: "Font Awesome 7 Free";

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 7px 20px rgba(43, 91, 101, 0.08);
  --shadow-card-hover: 0 12px 28px rgba(43, 91, 101, 0.13);

  /* Transition */
  --transition-fast: 0.25s ease;
  --transition-normal: 0.3s ease;

  /* Container */
  --container-width: 1320px;

  /* Legacy alias variables for existing selectors */
  --primary-color: var(--color-primary);
  --text-color: var(--color-text);
  --keyshu-primary: var(--color-primary);
  --keyshu-primary-dark: #02979a;
  --keyshu-primary-soft: rgba(3, 176, 177, 0.16);
  --keyshu-text-dark: #050505;
  --keyshu-text-muted: #6b7f86;
  --keyshu-white: var(--color-white);
}

/* =========================================================
   GLOBAL RESET & VARIABLES
========================================================= */

@media (min-width: 850px) {
  /* =========================================================
     HEADER / MENU
  ========================================================= */
  /* =======================================================================
     * 1) HEADER - TOP BAR
     * -----------------------------------------------------------------------
     * Căn item HTML ở top bar theo hàng ngang, không xuống dòng.
     * ======================================================================= */
  #top-bar .nav-small.nav > li.html {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8em;
    line-height: 1;
    white-space: nowrap;
  }

  #top-bar .nav-small.nav > li.html span {
    font-weight: 700;
  }

  /* =======================================================================
     * 2) HEADER - MAIN STRUCTURE
     * -----------------------------------------------------------------------
     * Bố cục desktop:
     * - Trái: logo + nav chính
     * - Phải: search + account/wishlist/cart
     * ======================================================================= */
  #masthead.header-main {
    background: var(--color-white);
  }

  #masthead .header-inner.flex-row.container {
    display: flex;
    align-items: center;
    max-width: 1280px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 28px;
  }

  #masthead #logo.logo {
    flex: 0 0 auto;
    margin-right: 8px;
  }

  #masthead #logo.logo a {
    display: inline-flex;
    align-items: center;
  }

  #masthead #logo.logo img {
    display: block;
    width: auto;
    max-height: 40px;
  }

  /* Khóa logo dark để tránh đổi logo không mong muốn trên desktop. */
  #masthead #logo.logo .header-logo-dark {
    display: none;
  }

  #masthead .hide-for-medium.flex-left.flex-grow {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
  }

  #masthead .header-nav-main.nav-left {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 30px;
    margin: 0;
  }

  #masthead .header-nav-main.nav-left > li {
    margin: 0;
  }

  #masthead .header-nav-main.nav-left > li > .nav-top-link {
    display: inline-flex;
    align-items: center;
    height: 64px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text);
  }

  #masthead .header-nav-main.nav-left > li > .nav-top-link:hover {
    color: var(--color-primary);
  }

  /* Bỏ pseudo line mặc định của nav link. */
  #masthead .header-nav-main.nav-left > li > .nav-top-link::before,
  #masthead .header-nav-main.nav-left > li > .nav-top-link::after {
    display: none !important;
  }

  #masthead .hide-for-medium.flex-right {
    flex: 0 0 auto;
  }

  #masthead .header-nav-main.nav-right {
    display: flex;
    align-items: center;
    margin: 0;
  }

  /* =======================================================================
     * 3) HEADER - SEARCH + HEADER ICONS
     * -----------------------------------------------------------------------
     * Đồng bộ kích thước ô search và icon hành động ở header desktop.
     * ======================================================================= */
  #masthead .header-search-form {
    min-width: 290px;
  }

  #masthead .header-search-form .searchform-wrapper,
  #masthead .header-search-form .searchform {
    margin: 0;
  }

  #masthead .header-search-form .searchform .flex-row.relative {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 5px;
  }

  #masthead .header-search-form .search-field {
    height: 34px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #masthead .header-search-form .search-field::placeholder {
    color: #a4b0b8;
  }

  #masthead .header-search-form .ux-search-submit.button.icon {
    width: 28px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    color: #8fa1ad;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #masthead .header-search-form .ux-search-submit.button.icon:hover {
    color: var(--color-primary);
  }

  #masthead .account-item .account-link,
  #masthead .header-wishlist-icon .wishlist-link,
  #masthead .cart-item .header-cart-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
    line-height: 1;
    color: #8fa1ad;
  }

  #masthead .account-item .account-link i,
  #masthead .header-wishlist-icon .wishlist-link i,
  #masthead .cart-item .header-cart-link i {
    font-size: 20px;
    line-height: 1;
  }

  #masthead .account-item .account-link:hover,
  #masthead .header-wishlist-icon .wishlist-link:hover,
  #masthead .cart-item .header-cart-link:hover {
    color: var(--color-primary);
  }

  /* Badge số lượng giỏ hàng. */
  #masthead .cart-item .header-cart-link i[data-icon-label]::after {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    top: -9px;
    right: -10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    color: var(--color-white);
    background: var(--color-primary);
    border: 2px solid var(--color-white);
    border-radius: 50%;
  }

  /* =======================================================================
     * 4) MENU CẤP 2 + SUB MENU CONTAINER
     * -----------------------------------------------------------------------
     * Áp dụng cho menu item có class: keyshu-menu-products
     * Mục tiêu:
     * - Submenu cấp 2 rộng theo desktop header
     * - Panel bo góc, đổ bóng, căn giữa
     * ======================================================================= */
  .header-nav .keyshu-menu-products,
  .nav .keyshu-menu-products,
  .header .keyshu-menu-products {
    position: static !important;
  }

  .header-nav .keyshu-menu-products > .sub-menu.nav-dropdown,
  .nav .keyshu-menu-products > .sub-menu.nav-dropdown,
  .header .keyshu-menu-products > .sub-menu.nav-dropdown,
  .keyshu-menu-products > .sub-menu.nav-dropdown {
    width: min(1180px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    right: auto !important;
    left: 50% !important;
    z-index: 9999 !important;
    background: var(--color-white) !important;
    border: 1px solid #eef2f4 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07) !important;
    transform: translateX(-50%) !important;
  }

  .header-nav .keyshu-menu-products > .sub-menu.nav-dropdown > li,
  .nav .keyshu-menu-products > .sub-menu.nav-dropdown > li,
  .header .keyshu-menu-products > .sub-menu.nav-dropdown > li,
  .keyshu-menu-products > .sub-menu.nav-dropdown > li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-nav .keyshu-menu-products > .sub-menu.nav-dropdown > li > a,
  .nav .keyshu-menu-products > .sub-menu.nav-dropdown > li > a,
  .header .keyshu-menu-products > .sub-menu.nav-dropdown > li > a,
  .keyshu-menu-products > .sub-menu.nav-dropdown > li > a {
    padding: 0 !important;
  }

  /* Reset các wrapper UX Block do Flatsome sinh. */
  .header-nav .keyshu-menu-products .ux-block,
  .header-nav .keyshu-menu-products .section,
  .header-nav .keyshu-menu-products .section-content,
  .header-nav .keyshu-menu-products .row,
  .header-nav .keyshu-menu-products .col,
  .header-nav .keyshu-menu-products .col-inner,
  .keyshu-menu-products .ux-block,
  .keyshu-menu-products .section,
  .keyshu-menu-products .section-content,
  .keyshu-menu-products .row,
  .keyshu-menu-products .col,
  .keyshu-menu-products .col-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  li.current-dropdown > .nav-dropdown {
    border-radius: 8px;
  }

  /* =======================================================================
     * 5) MEGA MENU CONTENT
     * -----------------------------------------------------------------------
     * Bố cục 3 cột:
     * - 2 cột danh mục
     * - 1 cột banner
     * ======================================================================= */
  .keyshu-mega-menu-wrap {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 10px !important;
    overflow: hidden !important;
    font-family: var(--font-main) !important;
    background: var(--color-white) !important;
    border-radius: 16px !important;
  }

  .keyshu-mega-menu-wrap * {
    box-sizing: border-box !important;
  }

  .keyshu-mega-menu-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px !important;
    align-items: stretch !important;
    gap: 36px !important;
    width: 100% !important;
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .keyshu-mega-menu-column {
    min-width: 0 !important;
    padding-right: 34px !important;
    border-right: 1px solid var(--color-border) !important;
  }

  .keyshu-mega-menu-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
    padding-left: 10px !important;
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--color-text) !important;
    border-left: 4px solid var(--color-primary) !important;
  }

  .keyshu-mega-menu-title span {
    font-size: 15px !important;
    line-height: 1 !important;
    color: var(--color-primary) !important;
    transition: transform 0.2s ease !important;
  }

  .keyshu-mega-menu-title:hover {
    color: var(--color-primary) !important;
  }

  .keyshu-mega-menu-title:hover span {
    transform: translateX(4px) !important;
  }

  .keyshu-mega-cat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 30px !important;
  }

  .keyshu-mega-cat-item {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--color-border-soft) !important;
    transition: all 0.2s ease !important;
  }

  .keyshu-mega-cat-item:hover {
    border-bottom-color: rgba(3, 176, 177, 0.25) !important;
  }

  .keyshu-mega-cat-thumb {
    display: flex !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
    background: var(--color-bg-soft-blue) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-pill) !important;
    transition: all var(--transition-fast) !important;
  }

  .keyshu-mega-cat-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--radius-pill) !important;
    object-fit: cover !important;
  }

  .keyshu-mega-cat-item span {
    font-family: var(--font-main) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    color: #334155 !important;
    transition: color 0.2s ease !important;
  }

  .keyshu-mega-cat-item:hover span {
    color: var(--color-primary) !important;
  }

  .keyshu-mega-cat-item:hover .keyshu-mega-cat-thumb {
    border-color: var(--color-primary) !important;
    box-shadow: 0 5px 14px rgba(3, 176, 177, 0.12) !important;
    transform: scale(1.04) !important;
  }

  .keyshu-mega-empty {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
  }

  .keyshu-mega-banner-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
  }

  .keyshu-mega-banner {
    display: block !important;
    width: 100% !important;
    height: 128px !important;
    overflow: hidden !important;
    position: relative !important;
    text-decoration: none !important;
    background: #eefafa !important;
    border-radius: var(--radius-lg) !important;
  }

  .keyshu-mega-banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--radius-lg) !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
  }

  .keyshu-mega-banner:hover img {
    transform: scale(1.05) !important;
  }

  .keyshu-mega-banner-text {
    padding: 14px 16px !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)) !important;
  }

  .keyshu-mega-banner-text h3 {
    margin: 0 !important;
    font-family: var(--font-main) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
  }

  /* =========================================================
     HERO SECTION
  ========================================================= */
  /* =======================================================================
     * 6) KEYSHU HERO SLIDER (DESKTOP)
     * -----------------------------------------------------------------------
     * Áp dụng cho slider có class: keyshu-hero-slider
     * Chỉ giữ style desktop, không có responsive mobile/tablet.
     * ======================================================================= */
  .keyshu-hero-slider .banner-layers {
    position: relative;
  }

  .keyshu-hero-slider .text-box {
    width: 48% !important;
    max-width: 620px;
    left: 7% !important;
  }

  .keyshu-hero-slider .text-box-content {
    border-radius: 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

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

  .keyshu-hero-slider .text-inner h2 {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.2vw, 45px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
    text-transform: uppercase;
    color: var(--color-primary) !important;
  }

  .keyshu-hero-slider .text-inner h4 {
    margin: 0 0 24px;
    font-size: clamp(16px, 1.35vw, 18px);
    font-weight: 700;
    line-height: 1.65;
    text-align: justify;
    color: var(--color-heading-strong) !important;
  }

  .keyshu-hero-slider .button.primary {
    min-height: 52px;
    padding: 0 34px;
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 26px rgba(3, 176, 177, 0.28);
    transition: all var(--transition-fast);
  }

  .keyshu-hero-slider .button.primary span {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--color-white) !important;
  }

  .keyshu-hero-slider .button.primary:hover {
    background: #009b9c !important;
    border-color: #009b9c !important;
    box-shadow: 0 16px 32px rgba(3, 176, 177, 0.35);
    transform: translateY(-2px);
  }

  .keyshu-hero-slider .banner-bg .overlay {
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.18) 42%,
            rgba(255, 255, 255, 0.04) 100%
          ) !important;
  }

  .keyshu-hero-slider .flickity-page-dots .dot {
    width: 9px;
    height: 9px;
    background: rgba(3, 176, 177, 0.35);
    opacity: 1;
  }

  .keyshu-hero-slider .flickity-page-dots .dot.is-selected {
    width: 26px;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
  }

  .keyshu-hero-slider .flickity-button {
    color: var(--color-primary);
  }

  .keyshu-hero-slider .flickity-button:hover .arrow {
    fill: var(--color-white);
  }

  .keyshu-hero-slider .flickity-button .arrow {
    fill: var(--color-primary);
  }

  /* =========================================================
     CATEGORY SECTION
  ========================================================= */
  /* =======================================================================
     * 6.1) KEYSHU CATEGORY - COPY TỪ UI SECTION DANH MỤC (DESKTOP)
     * -----------------------------------------------------------------------
     * Nguồn: flatsome-child/assets/ui/style.css
     * Gốc: keyshu-category-circle (Option 1 + Option 3)
     *
     * Mapping sang HTML Flatsome hiện tại:
     * - .keyshu-category                             -> section tổng
     * - .keyshu-category .text h2                   -> tiêu đề
     * - .keyshu-category .row.large-columns-...     -> grid danh mục
     * - .product-category .box-category             -> item
     * - .product-category .box-image                -> vòng tròn ảnh
     * - .product-category .header-title             -> name plate
     *
     * Lưu ý:
     * - Chỉ dùng class selector (không dùng id)
     * - Giữ nguyên tinh thần và thuộc tính từ section UI gốc
     * ======================================================================= */

  /* SECTION WRAPPER */
  .section.keyshu-category {
    width: 100%;
    padding: 80px 0 100px;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg-soft-green) 100%);
  }

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

  .section.keyshu-category > .section-content {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* HEAD */
  .section.keyshu-category .text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }

  .section.keyshu-category .text h2 {
    margin: 0;
    padding-bottom: 12px;
    position: relative;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-heading);
  }

  .section.keyshu-category .text h2::after {
    width: 60px;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    background: var(--primary-color);
    border-radius: 2px;
    transform: translateX(-50%);
    content: "";
  }

  /* GRID */
  .section.keyshu-category .row.large-columns-5.medium-columns-3.small-columns-2.row-small.row-full-width {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ITEM */
  .section.keyshu-category .product-category.col {
    flex: 0 0 auto !important;
    min-height: auto;
    padding: 0 !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .section.keyshu-category .product-category.col .col-inner {
    padding: 0 !important;
  }

  .section.keyshu-category .product-category.col a {
    display: block;
    text-decoration: none;
  }

  .section.keyshu-category .box-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    position: relative;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .section.keyshu-category .box-category:hover {
    transform: translateY(-8px);
  }

  /* IMAGE CIRCLE */
  .section.keyshu-category .box-category .box-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, var(--color-white) 0%, #f9ffff 100%);
    border: 2px solid rgba(3, 176, 177, 0.15);
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(17, 74, 80, 0.05);
    transform: translateY(-6px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .section.keyshu-category .box-category .box-image::before {
    width: 82%;
    height: 82%;
    position: absolute;
    background: radial-gradient(
            circle,
            rgba(3, 176, 177, 0.14) 0%,
            rgba(3, 176, 177, 0.075) 38%,
            rgba(3, 176, 177, 0.025) 60%,
            rgba(3, 176, 177, 0) 78%
          );
    border-radius: 50%;
    filter: blur(0.4px);
    content: "";
  }

  .section.keyshu-category .box-category .box-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.16) 34%,
            rgba(255, 255, 255, 0) 55%
          );
    pointer-events: none;
    content: "";
  }

  .section.keyshu-category .box-category .box-image > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .section.keyshu-category .box-category .box-image img {
    width: 78% !important;
    height: 78% !important;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 14px 16px rgba(16, 72, 78, 0.12));
    object-fit: contain;
    transform: translateY(8px) scale(1.15);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .section.keyshu-category .box-category:hover .box-image {
    border-color: var(--primary-color);
    box-shadow: 0 15px 35px rgba(17, 74, 80, 0.1);
  }

  .section.keyshu-category .box-category:hover .box-image::before {
    background: radial-gradient(
            circle,
            rgba(3, 176, 177, 0.18) 0%,
            rgba(3, 176, 177, 0.09) 40%,
            rgba(3, 176, 177, 0.03) 62%,
            rgba(3, 176, 177, 0) 80%
          );
  }

  .section.keyshu-category .box-category:hover .box-image img {
    transform: translateY(4px) scale(1.18);
  }

  /* NAME PLATE */
  .section.keyshu-category .box-category .box-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    max-width: 65%;
    min-height: 36px;
    margin-top: -20px;
    padding: 10px 12px !important;
    position: relative;
    z-index: 5;
    background: var(--color-white);
    border: 1.5px solid rgba(3, 176, 177, 0.2);
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 16px rgba(17, 74, 80, 0.06);
    transform: translateY(-4px);
    transition: all var(--transition-fast);
  }

  .section.keyshu-category .box-category .box-text-inner {
    width: 100%;
  }

  .section.keyshu-category .box-category .header-title {
    margin: 0 !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: none !important;
    white-space: nowrap;
    color: var(--color-heading);
  }

  .section.keyshu-category .box-category:hover .box-text {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(3, 176, 177, 0.2);
  }

  .section.keyshu-category .box-category:hover .header-title {
    color: var(--color-white);
  }

  /* DESKTOP LARGE */
  @media (min-width: 1440px) {
    .section.keyshu-category > .section-content {
      max-width: 1320px;
    }

    .section.keyshu-category .box-category .box-image {
      width: 130px;
      height: 130px;
    }

    .section.keyshu-category .box-category .box-text {
      min-width: 140px;
    }

    .section.keyshu-category .box-category .header-title {
      font-size: 13.5px;
    }
  }

  /* =========================================================
     FOOTER
  ========================================================= */
  /* =======================================================================
     * 7) FOOTER - CLUB / NEWSLETTER BAR
     * -----------------------------------------------------------------------
     * Thanh đăng ký newsletter phía trên footer chính.
     * ======================================================================= */
  .keyshu-footer-club-section,
  .section.has-block:has(.footer-club-left) {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    background: var(--color-primary) !important;
  }

  .keyshu-footer-club-section .section-bg,
  .section.has-block:has(.footer-club-left) .section-bg {
    background: var(--color-primary) !important;
  }

  .keyshu-footer-club-section .section-content,
  .section.has-block:has(.footer-club-left) .section-content {
    max-width: 1200px;
    margin: 0 auto;
  }

  .keyshu-footer-club-section .row,
  .section.has-block:has(.footer-club-left) .row {
    align-items: center !important;
  }

  .keyshu-footer-club-section .col,
  .section.has-block:has(.footer-club-left) .col {
    padding-bottom: 0 !important;
  }

  .keyshu-footer-club-section .col-inner,
  .section.has-block:has(.footer-club-left) .col-inner {
    padding: 0 !important;
  }

  .footer-club-left {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .footer-club-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: 8px;
  }

  .footer-club-icon i {
    font-size: 24px;
    line-height: 1;
    color: var(--color-white);
  }

  .footer-club-text h3 {
    margin: 0 0 4px !important;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-white);
  }

  .footer-club-text h3 a {
    text-decoration: none !important;
    color: var(--color-white) !important;
  }

  .footer-club-text p {
    margin: 0 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-white);
    opacity: 0.95;
  }

  .keyshu-newsletter-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin: 0;
  }

  .keyshu-newsletter-form p {
    margin: 0 !important;
  }

  .keyshu-newsletter-field {
    flex: 1 1 auto;
    max-width: 345px;
  }

  .keyshu-newsletter-submit {
    flex: 0 0 auto;
    position: relative;
  }

  .keyshu-newsletter-form input[type="tel"] {
    width: 100%;
    height: 42px;
    margin: 0 !important;
    padding: 0 20px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 4px;
    box-shadow: none;
    outline: none;
  }

  .keyshu-newsletter-form input[type="tel"]::placeholder {
    color: #8b8b8b;
    opacity: 1;
  }

  .keyshu-newsletter-form input[type="tel"]:focus {
    border-color: var(--color-white);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
  }

  .keyshu-newsletter-form input[type="submit"],
  .keyshu-newsletter-button {
    min-width: 145px;
    height: 42px;
    margin: 0 !important;
    padding: 0 25px;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--color-white);
    background: transparent;
    border: 1px solid var(--color-white);
    border-radius: 4px;
    box-shadow: none;
    transition: all var(--transition-fast);
    cursor: pointer;
  }

  .keyshu-newsletter-form input[type="submit"]:hover,
  .keyshu-newsletter-button:hover {
    color: var(--color-primary);
    background: var(--color-white);
    border-color: var(--color-white);
  }

  .keyshu-newsletter-form .wpcf7-spinner {
    margin: 0;
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
  }

  .keyshu-newsletter-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-white);
  }

  .keyshu-footer-club-section .wpcf7-response-output,
  .section.has-block:has(.footer-club-left) .wpcf7-response-output {
    max-width: 500px;
    margin: 12px 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 4px;
  }

  /* =======================================================================
     * 8) FOOTER - MAIN 5 COLUMNS
     * -----------------------------------------------------------------------
     * Footer chính gồm logo, menu link, thông tin liên hệ và social.
     * ======================================================================= */
  .keyshu-footer-main {
    padding: 58px 0 56px !important;
    overflow: hidden;
    position: relative;
    font-family: var(--font-main-alt);
    color: var(--color-white);
    background: #008989 !important;
  }

  .keyshu-footer-main::before {
    width: 360px;
    height: 360px;
    position: absolute;
    top: -120px;
    left: 11%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    content: "";
  }

  .keyshu-footer-main::after {
    width: 340px;
    height: 340px;
    position: absolute;
    right: 9%;
    bottom: -150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    content: "";
  }

  .keyshu-footer-main .section-content {
    position: relative;
    z-index: 2;
  }

  .keyshu-footer-main .row {
    display: grid !important;
    grid-template-columns: 1.5fr 1.1fr 1.3fr 1.15fr 1.55fr;
    align-items: flex-start !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .keyshu-footer-main .col {
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }

  .keyshu-footer-main .col-inner {
    padding: 0 !important;
  }

  .keyshu-footer-main .ux-logo {
    width: auto !important;
    max-width: 180px !important;
    margin: 0 0 20px !important;
  }

  .keyshu-footer-main .ux-logo-link {
    padding: 0 !important;
  }

  .keyshu-footer-main .ux-logo-image {
    display: block;
    width: auto !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 52px !important;
    object-fit: contain;
  }

  .keyshu-footer-main p {
    margin: 0 0 22px !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.9);
  }

  .keyshu-footer-main .img {
    margin: 0 0 15px !important;
  }

  .keyshu-footer-main .img-inner {
    background: transparent !important;
  }

  .keyshu-footer-main .img img {
    display: block;
    max-width: 170px;
    height: auto;
  }

  .keyshu-footer-main .footer-socials {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .footer-socials a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    min-height: 33px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transition: all var(--transition-fast);
    outline: none !important;
  }

  .keyshu-footer-main .footer-socials a:hover {
    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(-2px);
  }

  .keyshu-footer-main .footer-socials a:focus,
  .keyshu-footer-main .footer-socials a:active,
  .keyshu-footer-main .footer-socials a:visited {
    text-decoration: none !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .keyshu-footer-main .footer-socials i {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  .keyshu-footer-main .footer-socials .fa-facebook-f {
    font-size: 15px !important;
  }

  .keyshu-footer-main .footer-socials .fa-instagram,
  .keyshu-footer-main .footer-socials .fa-tiktok,
  .keyshu-footer-main .footer-socials .fa-youtube {
    font-size: 14px !important;
  }

  .keyshu-footer-main .footer-socials a::before,
  .keyshu-footer-main .footer-socials a::after {
    display: none !important;
    content: none !important;
  }

  .keyshu-footer-main h2.uppercase {
    margin: 0 0 15px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    color: var(--color-white) !important;
  }

  .keyshu-footer-main .ux-menu {
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .ux-menu-link {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !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: none !important;
    box-shadow: none !important;
  }

  .keyshu-footer-main .ux-menu-link__link {
    min-height: auto !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    transition: all 0.22s ease;
  }

  .keyshu-footer-main .ux-menu-link__text {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: inherit !important;
  }

  .keyshu-footer-main .ux-menu-link__link:hover {
    color: var(--color-white) !important;
    transform: translateX(4px);
  }

  .keyshu-footer-main .ux-menu--divider-solid .ux-menu-link,
  .keyshu-footer-main .ux-menu--divider-solid .ux-menu-link:not(:last-child) {
    border-bottom: none !important;
  }

  .keyshu-footer-main .footer-contact {
    margin: 0 !important;
    padding: 0 !important;
  }

  .keyshu-footer-main .footer-contact ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .keyshu-footer-main .footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0 0 15px !important;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
  }

  .keyshu-footer-main .footer-contact li:last-child {
    margin-bottom: 0 !important;
  }

  .keyshu-footer-main .footer-contact i {
    flex: 0 0 20px;
    width: 20px;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: var(--color-white);
    opacity: 0.95;
  }

  .keyshu-footer-main .footer-contact span,
  .keyshu-footer-main .footer-contact div {
    color: rgba(255, 255, 255, 0.92);
  }

  .keyshu-footer-main .footer-contact strong {
    display: inline-block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-white);
  }

  .absolute-footer.dark.medium-text-center.small-text-center {
    display: none;
  }

  /* =======================================================================
     * 9) FOOTER - BOTTOM BAR
     * -----------------------------------------------------------------------
     * Dải footer cuối gồm text bản quyền và badges thanh toán.
     * ======================================================================= */
  .footer-bottom {
    width: 100%;
    padding: 12px 0;
    font-family: var(--font-main-alt);
    color: var(--color-white);
    background: #005947;
  }

  .footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1320px;
    min-height: 24px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .footer-bottom p {
    margin: 0 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
  }

  .footer-payments {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .footer-payments span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 22px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    color: #0f2a5f;
    background: var(--color-white);
    border-radius: 4px;
  }

  .footer-payments span:nth-child(1) {
    color: #15266f;
  }

  .footer-payments span:nth-child(2) {
    color: #e21d2f;
  }

  .footer-payments span:nth-child(3) {
    color: #b0007a;
  }

  .footer-payments span:nth-child(4) {
    color: #0078ff;
  }

  .footer-payments span:nth-child(5) {
    color: #f04b23;
  }
}

@media (min-width: 850px) {
  /* =========================================================
     BEST SELLER SECTION
  ========================================================= */
  /* =====================================================
     TOP SẢN PHẨM BÁN CHẠY - BEST SELLER SECTION
     Khu vực hiển thị sản phẩm bán chạy trên trang chủ
     Gồm:
     - 1 sản phẩm nổi bật bên trái
     - Danh sách sản phẩm bán chạy bên phải
     - Tiêu đề section + nút xem tất cả
  ===================================================== */

  /* =========================================================
     KEYSHU - TOP SẢN PHẨM BÁN CHẠY - CLEANED CSS
     Nguồn: Pasted code.css
     Mục tiêu: giữ nguyên kết quả hiển thị cuối cùng, giảm các dòng tự ghi đè
     Phạm vi: .keyshu-top-products / WooCommerce / Flatsome
  ========================================================= */
  .keyshu-top-products {
    width: 100%;
    padding: 80px 0 50px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, var(--color-bg-soft-green) 0%, #f0fdfa 100%);
  }

  /* =========================================================
     KEYSHU - TOP SẢN PHẨM BÁN CHẠY
     Dùng cho Flatsome + WooCommerce
     Scope chính: .keyshu-top-products
  ========================================================= */
  .keyshu-top-products {
    --keyshu-bg: var(--color-bg-soft-green);
    --keyshu-border: var(--color-border-soft);
    --keyshu-green: var(--color-success);
    --keyshu-muted: var(--color-muted);
    --keyshu-price: var(--color-price);
    --keyshu-primary: var(--color-primary);
    --keyshu-primary-dark: #00796b;
    --keyshu-red: #f44336;
    --keyshu-red-dark: #c62828;
    --keyshu-text: var(--color-heading-strong);
  }

  /* Bóng trang trí phía sau giống style cũ */
  .keyshu-top-products::after {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 10%;
    right: -50px;
    z-index: -1;
    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");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(15deg);
    content: "";
  }

  /* Container desktop */
  .keyshu-top-products > .section-content > .row {
    display: grid !important;
    grid-template-columns: 318px minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
    width: 100%;
    max-width: 1320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Reset layout col của Flatsome */
  .keyshu-top-products > .section-content > .row > .col {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* =========================================================
     HEADER BÊN PHẢI
  ========================================================= */
  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 30px !important;
    padding-bottom: 10px;
    position: relative;
    border-bottom: 1px solid rgba(0, 150, 136, 0.2);
  }

  .keyshu-top-products > .section-content > .row > .col:nth-child(2) > .col-inner > .row:first-child::after {
    width: 200px;
    height: 3px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: linear-gradient(90deg, var(--keyshu-primary) 0%, transparent 100%);
    border-radius: var(--radius-pill);
    content: "";
  }

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

  /* Tiêu đề dạng pill */
  .keyshu-top-products h2.uppercase {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0 !important;
    padding: 10px 32px;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-white) !important;
    background: linear-gradient(135deg, var(--keyshu-primary) 0%, var(--keyshu-primary-dark) 100%);
    border-radius: 20px 4px 20px 4px;
    box-shadow: 0 4px 15px rgba(0, 121, 107, 0.2);
  }

  .keyshu-top-products h2.uppercase::before {
    font-family: var(--font-icon);
    font-size: 14px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.85);
    content: "\e561";
  }

  /* Nút xem tất cả */
  .keyshu-top-products .col-inner.text-right {
    text-align: right !important;
  }

  .keyshu-top-products .col-inner.text-right .button.primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 !important;
    padding: 8px 22px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1;
    text-transform: uppercase;
    color: var(--keyshu-primary) !important;
    background: transparent !important;
    border: 1.5px solid var(--keyshu-primary) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
  }

  .keyshu-top-products .col-inner.text-right .button.primary::after {
    font-family: var(--font-icon);
    font-size: 13px;
    font-weight: 900;
    transition: transform var(--transition-fast);
    content: "\f178";
  }

  .keyshu-top-products .col-inner.text-right .button.primary:hover {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.3) !important;
    transform: translateY(-2px);
  }

  .keyshu-top-products .col-inner.text-right .button.primary:hover::after {
    transform: translateX(4px);
  }

  /* =========================================================
     GRID SẢN PHẨM BÊN PHẢI
  ========================================================= */
  .keyshu-top-products > .section-content > .row > .col:nth-child(2) .row.large-columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
    margin: 0 !important;
  }

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

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

  .keyshu-top-products .product-small.box,
.keyshu-top-products .product-small .box {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--keyshu-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: all 0.28s ease;
  }

  .keyshu-top-products .product-small:hover .box {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  /* Ảnh sản phẩm */
  .keyshu-top-products .box-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px !important;
    padding: 8px !important;
    background: var(--color-white) !important;
  }

  .keyshu-top-products .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.35s ease;
  }

  .keyshu-top-products .product-small:hover .box-image img {
    transform: scale(1.06);
  }

  /* Ẩn label hết hàng mặc định nằm trên ảnh */
  .keyshu-top-products .out-of-stock-label {
    display: none !important;
  }

  /* Sản phẩm hết hàng: ảnh xám */
  .keyshu-top-products .product-small.out-of-stock .box-image img {
    filter: grayscale(100%) opacity(0.62);
  }

  /* Badge sale */

  /* Nội dung card */
  .keyshu-top-products .box-text-products {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: left !important;
  }

  /* Tên sản phẩm */
  .keyshu-top-products .product-title,
.keyshu-top-products .product-title a {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    color: var(--keyshu-text) !important;
  }

  .keyshu-top-products .product-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Price wrapper chuyển thành layout dọc */
  .keyshu-top-products .price-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Rating */
  .keyshu-top-products .star-rating {
    align-items: center;
  }

  .keyshu-top-products .star-rating::after {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
  }

  /* Trạng thái kho */
  .keyshu-top-products .price-wrapper::after {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--keyshu-green);
  }

  .keyshu-top-products .product-small.instock .price-wrapper::after {
    content: "✓ Còn hàng";
  }

  .keyshu-top-products .product-small.out-of-stock .price-wrapper::after {
    color: var(--color-price);
    content: "✖ Hết hàng";
  }

  /* Giá */
  .keyshu-top-products .price {
    order: 4;
  }

  .keyshu-top-products .price del {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: line-through;
    color: var(--color-muted-2) !important;
    opacity: 1 !important;
  }

  .keyshu-top-products .price del .amount,
.keyshu-top-products .price del bdi {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--color-muted-2) !important;
  }

  .keyshu-top-products .price ins {
    text-decoration: none !important;
  }

  .keyshu-top-products .price ins .amount,
.keyshu-top-products .price ins bdi {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--keyshu-price) !important;
  }

  /* Button */
  .keyshu-top-products .add-to-cart-button {
    margin-top: auto !important;
  }

  .keyshu-top-products .add-to-cart-button .button {
    display: grid !important;
    grid-template-columns: 1fr 36px;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
    text-transform: uppercase;
    color: var(--color-white) !important;
    background: linear-gradient(135deg, var(--keyshu-red) 0%, var(--keyshu-red-dark) 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 15px rgba(198, 40, 40, 0.2) !important;
    transition: all var(--transition-fast);
  }

  .keyshu-top-products .add-to-cart-button .button::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 0 auto auto !important;
    font-family: var(--font-icon);
    font-size: 13px;
    font-weight: 900;
    content: "\f217";
  }

  .keyshu-top-products .add-to-cart-button .button:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    box-shadow: 0 8px 20px rgba(183, 28, 28, 0.3) !important;
    transform: translateY(-2px);
  }

  /* Nút hết hàng */
  .keyshu-top-products .product-small.out-of-stock .add-to-cart-button .button {
    color: var(--color-white) !important;
    background: #cbd5e0 !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  /* =========================================================
     FEATURED PRODUCT BÊN TRÁI
  ========================================================= */
  .keyshu-top-products > .section-content > .row > .col:first-child .row {
    height: 100%;
    margin: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .product-small {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .product-small .box {
    min-height: 100%;
    background: linear-gradient(135deg, var(--color-white) 0%, #F2FFFF 38%, #DFFFFF 72%, #B9FFFF 100%);
    border: 1.5px solid rgba(0, 150, 136, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 150, 136, 0.12);
  }

  /* Badge bên trái thành HOT */
  .keyshu-top-products > .section-content > .row > .col:first-child .badge-inner .onsale::before {
    font-size: 13px;
    letter-spacing: 1px;
  }

  /* Ảnh featured lớn */
  .keyshu-top-products > .section-content > .row > .col:first-child .box-image {
    height: 318px !important;
    padding: 0 !important;
    background: transparent !important;
  }

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

  /* Text featured lớn hơn */
  .keyshu-top-products > .section-content > .row > .col:first-child .box-text-products {
    padding: 18px 16px 16px !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.4 !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .product-title {
    min-height: 45px;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .price ins .amount,
.keyshu-top-products > .section-content > .row > .col:first-child .price ins bdi {
    font-size: 22px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button {
    grid-template-columns: 1fr 42px;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 12px !important;
    line-height: 42px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button::after {
    height: 42px;
    font-size: 15px;
  }

  /* =========================================================
     FIX: ĐÁNH GIÁ SAO + SỐ LƯỢNG ĐÁNH GIÁ CÙNG 1 HÀNG
  ========================================================= */

  /* Cho các phần tử trong price-wrapper chảy tự nhiên theo dòng */

  /* Sao và số lượng đánh giá nằm cùng 1 hàng */

  /* Sao nền màu xám */

  /* Xóa số 5.0 giả nếu CSS cũ còn */

  /* Sao vàng thực tế theo width WooCommerce */

  /* Sao vàng */

  /* Số lượng đánh giá thật nằm bên phải sao */

  /* Xóa nội dung Đã bán 30k+ cũ */

  /* Thêm chữ đánh giá sau số lượng thật */

  /* Giá xuống dòng riêng bên dưới đánh giá */

  /* =========================================================
     KEYSHU - SAO + ĐIỂM ĐÁNH GIÁ + SỐ LƯỢNG ĐÁNH GIÁ
     Kết quả: ★★★★★ 4.8/5 (3) đánh giá
  ========================================================= */
  .keyshu-top-products .price-wrapper {
    display: block !important;
    text-align: left !important;
  }

  /* Sao đánh giá */
  .keyshu-top-products .star-rating {
    display: inline-block !important;
    width: 75px !important;
    height: 14px !important;
    margin: 0 5px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    color: var(--color-rating) !important;
    vertical-align: middle !important;
  }

  /* Sao nền xám */
  .keyshu-top-products .star-rating::before {
    position: absolute !important;
    top: 0;
    left: 0;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    color: #d9e2e5 !important;
    content: "★★★★★" !important;
  }

  /* Tắt số giả từ CSS cũ */
  .keyshu-top-products .star-rating::after {
    content: none !important;
  }

  /* Sao vàng thật theo width WooCommerce */
  .keyshu-top-products .star-rating span {
    display: block !important;
    height: 14px !important;
    padding-top: 14px !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 0;
    left: 0;
    font-size: 0 !important;
  }

  .keyshu-top-products .star-rating span::before {
    position: absolute !important;
    top: 0;
    left: 0;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    color: var(--color-rating) !important;
    content: "★★★★★" !important;
  }

  /* Điểm đánh giá thật: 4.8/5 */
  .keyshu-top-products .keyshu-rating-score {
    display: inline-block !important;
    margin: 0 5px 0 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    color: var(--color-primary) !important;
    vertical-align: middle !important;
  }

  /* Số lượng đánh giá thật */
  .keyshu-top-products .review-count {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: var(--color-muted) !important;
    vertical-align: middle !important;
  }

  /* Xóa nội dung Đã bán 30k+ cũ */
  .keyshu-top-products .review-count::before {
    content: none !important;
  }

  /* Thêm chữ đánh giá */
  .keyshu-top-products .review-count::after {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
  }

  /* Giá nằm dòng riêng bên dưới */

  /* =========================================================
     KEYSHU - THU GỌN KHOẢNG CÁCH THÔNG TIN SẢN PHẨM
     Chỉ chỉnh phần text / rating / price / stock
  ========================================================= */

  /* Giảm padding phần nội dung card */
  .keyshu-top-products .box-text-products {
    padding: 10px 12px !important;
  }

  /* Tên sản phẩm sát phần đánh giá hơn */
  .keyshu-top-products .product-title {
    min-height: 34px !important;
    margin-bottom: 3px !important;
  }

  .keyshu-top-products .product-title,
.keyshu-top-products .product-title a {
    line-height: 1.25 !important;
  }

  /* Dòng đánh giá sát tên hơn */
  .keyshu-top-products .price-wrapper {
    margin-top: 2px !important;
    line-height: 1 !important;
  }

  /* Sao + điểm + số đánh giá gọn hơn */
  .keyshu-top-products .star-rating,
.keyshu-top-products .keyshu-rating-score {
    margin-right: 4px !important;
  }

  .keyshu-top-products .review-count {
    line-height: 13px !important;
  }

  /* Giá sát dòng đánh giá hơn */

  /* Giá mới */
  .keyshu-top-products .price ins .amount,
.keyshu-top-products .price ins bdi {
    line-height: 1 !important;
  }

  /* Giá cũ */
  .keyshu-top-products .price del,
.keyshu-top-products .price del .amount,
.keyshu-top-products .price del bdi {
    line-height: 1 !important;
  }

  /* Trạng thái kho sát giá hơn */
  .keyshu-top-products .price-wrapper::after {
    margin-top: 6px !important;
    line-height: 1 !important;
  }

  /* Nút thêm giỏ hàng sát phần trạng thái hơn */
  .keyshu-top-products .add-to-cart-button {
    padding-top: 8px !important;
  }

  /* =========================================================
     KEYSHU - BO GÓC ẢNH SẢN PHẨM
     Trái: 30px
     Phải dưới: 30px
     Phải trên: 10px
  ========================================================= */

  /* Khung ảnh sản phẩm */
  .keyshu-top-products .box-image {
    overflow: hidden !important;
    border-radius: 20px 8px 20px 20px !important;
  }

  /* Ảnh bên trong */
  .keyshu-top-products .box-image img {
    overflow: hidden !important;
    border-radius: 20px 8px 20px 20px !important;
  }

  /* Nếu có ảnh hover phía sau của Flatsome */
  .keyshu-top-products .box-image .back-image {
    border-radius: 20px 8px 20px 20px !important;
  }

  /* =========================================================
     KEYSHU - HIỂN THỊ BADGE THẬT CỦA WOOCOMMERCE
     Không tự fake -36%, không fake HOT
  ========================================================= */

  /* Badge sale của WooCommerce */
  .keyshu-top-products .badge-container {
    top: 5px !important;
    left: 20px !important;
    z-index: 4 !important;
  }

  /* Reset badge Flatsome */
  .keyshu-top-products .badge,
.keyshu-top-products .badge-inner,
.keyshu-top-products .badge-circle {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  /* Style badge thật */
  .keyshu-top-products .badge-inner {
    padding: 5px 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
    background: var(--color-sale) !important;
    box-shadow: none !important;
  }

  /* Hiển thị đúng text thật từ WooCommerce / Flatsome */
  .keyshu-top-products .badge-inner .onsale {
    font-size: 10px !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
  }

  /* Xóa badge giả -36% trên badge */

  /* Xóa badge giả -36% sau giá */

  /* Không fake HOT cho sản phẩm bên trái */
  .keyshu-top-products > .section-content > .row > .col:first-child .badge-inner .onsale::before {
    content: none !important;
  }

  /* Sản phẩm bên trái vẫn dùng badge thật, chỉ style to hơn nhẹ nếu muốn */
  .keyshu-top-products > .section-content > .row > .col:first-child .badge-inner {
    padding: 7px 17px !important;
    background: #ee2d24 !important;
    box-shadow: 0 4px 10px rgba(238, 45, 36, 0.3) !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .badge-inner .onsale {
    font-size: 13px !important;
    letter-spacing: 0.5px;
  }

  /* =========================================================
     KEYSHU - BADGE SALE THẬT NẰM NGAY SAU GIÁ
  ========================================================= */

  /* Ẩn vị trí badge cũ nếu còn bị Flatsome position absolute */
  .keyshu-top-products .price .badge-container {
    display: inline-flex !important;
    align-items: center !important;
    order: 3 !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
  }

  /* Price cần là flex để giá mới, giá cũ, badge nằm cùng hàng */
  .keyshu-top-products .price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 7px !important;
  }

  /* Giá mới */
  .keyshu-top-products .price ins {
    order: 1 !important;
  }

  /* Giá cũ */
  .keyshu-top-products .price del {
    order: 2 !important;
  }

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

  /* Style badge thật sau giá */
  .keyshu-top-products .price .badge-inner {
    padding: 3px 6px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
    background: var(--color-sale) !important;
    box-shadow: none !important;
  }

  /* Hiển thị đúng nội dung badge thật */
  .keyshu-top-products .price .badge-inner .onsale {
    font-size: 10px !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
  }

  /* Không fake -36% bằng CSS nữa */
  .keyshu-top-products .price::after {
    display: none !important;
    content: none !important;
  }

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

  /* =========================================================
     KEYSHU - FIX PADDING ẢNH ĐỀU 4 CẠNH TRONG CARD SẢN PHẨM
  ========================================================= */

  /* Vùng ảnh trong card: padding đều trên / phải / dưới / trái */
  .keyshu-top-products > .section-content > .row > .col:nth-child(2) .box-image {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    height: 230px !important;
    padding: 8px !important;
    overflow: hidden !important;
    background: var(--color-white) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Link bọc ảnh phải chiếm đủ vùng bên trong box-image */
  .keyshu-top-products > .section-content > .row > .col:nth-child(2) .box-image .image-fade_in_back,
.keyshu-top-products > .section-content > .row > .col:nth-child(2) .box-image .image-fade_in_back > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Ảnh chiếm đủ vùng đã trừ padding, giúp 4 cạnh đều nhau */
  .keyshu-top-products > .section-content > .row > .col:nth-child(2) .box-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 30px 5px 30px 30px !important;
    object-fit: cover !important;
  }

  /* =========================================================
     KEYSHU - HOVER NÚT THÊM GIỎ HÀNG
     Chỉ icon giỏ hàng quay, border-left không quay
  ========================================================= */

  /* Nút thêm giỏ hàng làm mốc cho đường kẻ */

  /* Xóa border-left khỏi icon để khi icon quay không kéo theo đường kẻ */
  .keyshu-top-products .add-to-cart-button .button::after {
    border-left: none !important;
    transform-origin: center center;
    transition: transform var(--transition-normal);
  }

  /* Tạo đường kẻ riêng, cố định, không quay */

  /* Card lớn bên trái có icon rộng 42px */

  /* Khi hover chỉ icon giỏ hàng quay */
  .keyshu-top-products .add-to-cart-button .button:hover::after {
    animation: keyshu-cart-icon-spin 0.55s ease-in-out 1;
  }

  /* =========================================================
     KEYSHU - SAU KHI THÊM GIỎ HÀNG: ĐỔI THÀNH XEM GIỎ HÀNG
     Icon bên phải đổi thành mũi tên
  ========================================================= */

  /* Nút xem giỏ hàng dùng lại đúng layout nút thêm giỏ hàng */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button {
    color: var(--color-white) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, #00796b 100%) !important;
    box-shadow: 0 6px 15px rgba(0, 121, 107, 0.22) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  /* Icon bên phải đổi từ giỏ hàng sang mũi tên */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button::after {
    font-size: 13px;
    border-left: none !important;
  }

  /* Card lớn bên trái */
  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button.keyshu-view-cart-button::after {
    font-size: 15px;
  }

  /* Hover nút xem giỏ hàng */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button:hover {
    background: linear-gradient(135deg, #009b9c 0%, #00695c 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 105, 92, 0.28) !important;
    transform: translateY(-2px);
  }

  /* Khi hover nút xem giỏ hàng: mũi tên trượt nhẹ, không quay */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button:hover::after {
    transform: translateX(3px);
    animation: none !important;
  }

  /* Giữ đường kẻ đứng yên bên trái icon */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button::before {
    width: 1px;
    height: 100%;
    position: absolute !important;
    top: 0;
    right: 36px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
    content: "" !important;
  }

  /* Card lớn bên trái có icon rộng 42px */
  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button.keyshu-view-cart-button::before {
    right: 42px;
  }

  /* =========================================================
     KEYSHU - ẨN LINK "XEM GIỎ HÀNG" MẶC ĐỊNH CỦA WOOCOMMERCE
     Giữ lại nút Xem giỏ hàng đã thay thế đúng vị trí nút Thêm giỏ hàng
  ========================================================= */

  /* Ẩn link xem giỏ hàng WooCommerce tự sinh bên dưới nút */
  .keyshu-top-products .add-to-cart-button + .added_to_cart,
.keyshu-top-products .add-to-cart-button .added_to_cart,
.keyshu-top-products a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }

  /* Không ẩn nút chính đã được đổi thành Xem giỏ hàng */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button {
    display: grid !important;
    visibility: visible !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
  }

  /* Card lớn bên trái */
  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button.keyshu-view-cart-button {
    height: 42px !important;
  }

  /* =========================================================
     KEYSHU - LOADING F110 CHÍNH GIỮA NÚT
     Giữ text + icon giỏ hàng đúng vị trí
  ========================================================= */

  /* Nút làm mốc */
  .keyshu-top-products .add-to-cart-button .button {
    overflow: hidden !important;
    position: relative !important;
  }

  /* Khi loading: không ẩn chữ, không làm mờ nút */
  .keyshu-top-products .add-to-cart-button .button.loading,
.keyshu-top-products .add-to-cart-button .button.keyshu-is-loading {
    color: var(--color-white) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Icon giỏ hàng bên phải luôn đứng yên */
  .keyshu-top-products .add-to-cart-button .button.loading::after,
.keyshu-top-products .add-to-cart-button .button.keyshu-is-loading::after,
.keyshu-top-products .add-to-cart-button .button:not(.keyshu-view-cart-button)::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    position: static !important;
    font-family: var(--font-icon) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    border-left: none !important;
    transform: none !important;
    animation: none !important;
    content: "\f217" !important;
  }

  /* Đường kẻ bên phải vẫn cố định */
  .keyshu-top-products .add-to-cart-button .button::before {
    width: 1px !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    right: 36px !important;
    z-index: 2 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    pointer-events: none !important;
    content: "" !important;
  }

  /* Icon loading thật được JS thêm vào */
  .keyshu-top-products .add-to-cart-button .button .keyshu-cart-loading-icon {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 5 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  /* Nội dung icon f110 */
  .keyshu-top-products .add-to-cart-button .button .keyshu-cart-loading-icon::before {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    font-family: var(--font-icon) !important;
    font-weight: 900 !important;
    line-height: 22px !important;
    text-align: center !important;
    transform-origin: center center !important;
    animation: keyshu-loading-spin-center 0.75s linear infinite !important;
    content: "\f110" !important;
  }

  /* Chỉ hiện loading khi nút đang thêm giỏ hàng */
  .keyshu-top-products .add-to-cart-button .button.loading .keyshu-cart-loading-icon,
.keyshu-top-products .add-to-cart-button .button.keyshu-is-loading .keyshu-cart-loading-icon {
    display: flex !important;
  }

  /* Card lớn bên trái: ô icon 42px */
  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button::before {
    right: 42px !important;
  }

  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button.loading::after,
.keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button.keyshu-is-loading::after,
.keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button:not(.keyshu-view-cart-button)::after {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
  }

  /* Nút xem giỏ hàng: bỏ loading, dùng mũi tên bên phải */
  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button .keyshu-cart-loading-icon {
    display: none !important;
  }

  .keyshu-top-products .add-to-cart-button .button.keyshu-view-cart-button::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    position: static !important;
    font-family: var(--font-icon) !important;
    font-weight: 900 !important;
    transform: none !important;
    animation: none !important;
    content: "\f178" !important;
  }

  /* Card lớn bên trái: mũi tên 42px */
  .keyshu-top-products > .section-content > .row > .col:first-child .add-to-cart-button .button.keyshu-view-cart-button::after {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

/* Animation quay đúng tâm */
@keyframes keyshu-loading-spin-center {
  from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
}

@media (min-width: 850px) {
  /* Bật lại cụm icon yêu thích */
  .keyshu-top-products .box-image .image-tools.top.right {
    display: flex !important;
    visibility: hidden !important;
    position: absolute !important;
    right: 14px !important;
    z-index: 12 !important;
    opacity: 0 !important;
    transform: translateX(8px) !important;
    transition: all var(--transition-fast) !important;
  }

  /* Bật lại cụm xem nhanh, chuyển lên dưới icon yêu thích */
  .keyshu-top-products .box-image .image-tools.grid-tools {
    display: flex !important;
    visibility: hidden !important;
    width: 34px !important;
    height: 34px !important;
    position: absolute !important;
    inset: 54px 14px auto auto !important;
    z-index: 12 !important;
    opacity: 0 !important;
    transform: translateX(8px) !important;
    transition: all var(--transition-fast) !important;
  }

  /* Icon yêu thích */
  .keyshu-top-products .box-image .wishlist-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.96) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px rgba(43, 91, 101, 0.14) !important;
    transition: all var(--transition-fast) !important;
  }

  /* Hover icon yêu thích */
  .keyshu-top-products .box-image .wishlist-button:hover {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    transform: scale(1.08) !important;
  }

  .keyshu-top-products .box-image .wishlist-button:hover i,
.keyshu-top-products .box-image .wishlist-button:hover svg {
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
    stroke: var(--color-white) !important;
  }

  /* Nút xem nhanh đổi thành icon */
  .keyshu-top-products .box-image .quick-view {
    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;
    line-height: 1 !important;
    text-decoration: none !important;
    color: var(--keyshu-primary) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px rgba(43, 91, 101, 0.14) !important;
    transition: all var(--transition-fast) !important;
  }

  /* Hover icon xem nhanh */
  .keyshu-top-products .box-image .quick-view:hover {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    transform: scale(1.08) !important;
  }

  .keyshu-top-products .box-image .quick-view:hover::before {
    color: var(--color-white) !important;
  }

  /* =========================================================
     KEYSHU - FIX ICON YÊU THÍCH + XEM NHANH THẲNG HÀNG
  ========================================================= */

  /* Box ảnh làm mốc */
  .keyshu-top-products .box-image {
    position: relative !important;
  }

  /* Cột icon bên phải */
  .keyshu-top-products .box-image .image-tools.top.right,
.keyshu-top-products .box-image .image-tools.grid-tools {
    display: flex !important;
    visibility: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 20 !important;
    opacity: 0 !important;
    transform: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }

  /* Icon yêu thích ở trên */
  .keyshu-top-products .box-image .image-tools.top.right {
    top: 18px !important;
  }

  /* Icon xem nhanh nằm thẳng dưới yêu thích */
  .keyshu-top-products .box-image .image-tools.grid-tools {
    top: 62px !important;
  }

  /* Hover card thì hiện cả 2 icon */
  .keyshu-top-products .product-small:hover .box-image .image-tools.top.right,
.keyshu-top-products .product-small:hover .box-image .image-tools.grid-tools {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Reset wrapper wishlist */
  .keyshu-top-products .box-image .wishlist-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  /* Reset toàn bộ style cũ của Flatsome cho 2 nút */
  .keyshu-top-products .box-image .wishlist-button,
.keyshu-top-products .box-image .quick-view {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    color: var(--keyshu-primary) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px rgba(43, 91, 101, 0.14) !important;
    transform: none !important;
    transition: all var(--transition-fast) !important;
  }

  /* Xem nhanh chỉ còn icon, không còn text */
  .keyshu-top-products .box-image .quick-view {
    font-size: 0 !important;
    text-indent: 0 !important;
  }

  /* Icon con mắt */
  .keyshu-top-products .box-image .quick-view::before {
    font-family: var(--font-icon) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--keyshu-primary) !important;
    content: "\f06e" !important;
  }

  /* Icon trái tim */
  .keyshu-top-products .box-image .wishlist-button i,
.keyshu-top-products .box-image .wishlist-button svg {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--keyshu-primary) !important;
    fill: var(--keyshu-primary) !important;
    stroke: var(--keyshu-primary) !important;
  }

  /* Hover từng icon */
  .keyshu-top-products .box-image .wishlist-button:hover,
.keyshu-top-products .box-image .quick-view:hover {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    transform: none !important;
  }

  /* Icon đổi trắng khi hover */
  .keyshu-top-products .box-image .wishlist-button:hover i,
.keyshu-top-products .box-image .wishlist-button:hover svg,
.keyshu-top-products .box-image .quick-view:hover::before {
    color: var(--color-white) !important;
    fill: var(--color-white) !important;
    stroke: var(--color-white) !important;
  }

  /* Ẩn popup wishlist để không làm lệch layout */
  .keyshu-top-products .box-image .wishlist-popup {
    display: none !important;
  }

  /* Ẩn tools rỗng */
  .keyshu-top-products .box-image .image-tools.bottom.left {
    display: none !important;
  }
}

/* =========================================================
   PROMO BANNER SECTION
========================================================= */
/* =========================================================
   DESKTOP - PROMO BANNER SECTION
   Section: keyshu-banner-ads
   Dùng cho Flatsome UX Builder + Flickity Slider
   Mục tiêu:
   - Banner nằm chính giữa trang
   - Chiều rộng tối đa 1320px
   - Chiều cao desktop khoảng 200px
   - Bo góc mềm giống ảnh mẫu
   - Không hiện mũi tên slider
   - Chấm slider nằm gọn bên dưới ảnh
   ========================================================= */
@media (min-width: 1024px) {
  /* ===============================
       1. Section chính bên ngoài
       - Tạo nền xanh rất nhạt giống ảnh
       - Padding trên/dưới để banner thoáng hơn
       =============================== */
  .keyshu-banner-ads {
    width: 100%;
    padding: 0px 0 0px !important;
    overflow: hidden;
    background: linear-gradient(180deg, #effdfb 0%, var(--color-white) 100%) !important;
  }

  /* Xóa padding inline do Flatsome tự sinh ra ở section */
  .keyshu-banner-ads#section_303352219 {
    padding-top: 48px !important;
    padding-bottom: 34px !important;
  }

  /* ===============================
       2. Nội dung section
       - Giữ content nằm trên nền
       =============================== */
  .keyshu-banner-ads .section-content {
    position: relative;
    z-index: 2;
  }

  /* ===============================
       3. Row của Flatsome
       - Ép row rộng tối đa 1320px
       - Canh giữa giống giao diện mẫu
       =============================== */
  .keyshu-banner-ads .row {
    width: calc(100% - 64px) !important;
    max-width: 1320px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Row collapse của Flatsome thường bị xóa khoảng cách,
       nên cần đảm bảo cột không tạo padding thừa */
  .keyshu-banner-ads .row-collapse > .col,
  .keyshu-banner-ads .col,
  .keyshu-banner-ads .col-inner {
    padding: 0 !important;
  }

  /* ===============================
       4. Wrapper slider
       - Bo góc toàn bộ banner
       - Cắt phần ảnh tràn ra ngoài
       - Tạo cảm giác card banner sạch
       =============================== */
  .keyshu-banner-ads .slider-wrapper {
    width: 100%;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: none;
  }

  /* ===============================
       5. Slider Flickity
       - Đảm bảo slider không bị tràn
       =============================== */
  .keyshu-banner-ads .slider {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
  }

  /* ===============================
       6. Viewport Flickity
       - Quan trọng: sửa chiều cao banner
       - HTML hiện tại đang inline height: 300px
       - Dùng !important để ghi đè an toàn
       =============================== */
  .keyshu-banner-ads .flickity-viewport {
    height: 200px !important;
    overflow: hidden;
    border-radius: 16px;
  }

  /* ===============================
       7. Từng item ảnh trong slider
       - Mỗi slide chiếm 100% chiều ngang
       =============================== */
  .keyshu-banner-ads .slider .img {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden;
    border-radius: 16px;
  }

  /* ===============================
       8. Khung ảnh của Flatsome
       - Flatsome đang set inline padding-top:300px
       - Cần reset để banner cao đúng 200px
       =============================== */
  .keyshu-banner-ads .img-inner {
    width: 100% !important;
    height: 200px !important;
    padding-top: 0 !important;
    overflow: hidden;
    border-radius: 16px;
  }

  /* ===============================
       9. Ảnh banner
       - Phủ kín khung
       - Giữ bố cục giống ảnh mẫu
       - object-position center để nội dung ảnh cân giữa
       =============================== */
  .keyshu-banner-ads .img-inner img {
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    position: static !important;
    border-radius: 16px;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* ===============================
       10. Hover nhẹ
       - Chỉ zoom rất nhẹ để nhìn cao cấp
       - Không làm lệch layout
       =============================== */
  .keyshu-banner-ads .img-inner:hover img {
    transform: scale(1.01) !important;
    transition: transform 0.35s ease;
  }

  /* ===============================
       11. Ẩn mũi tên slider nếu Flatsome render ra
       - Vì giao diện mẫu không có arrow
       =============================== */
  .keyshu-banner-ads .flickity-prev-next-button {
    display: none !important;
  }

  /* ===============================
       12. Dots slider
       - Đưa chấm slider nằm bên dưới ảnh
       - Nhỏ, tinh tế, không chiếm nhiều diện tích
       =============================== */
  .keyshu-banner-ads .flickity-page-dots {
    margin-top: 14px !important;
    padding: 0 !important;
    position: relative !important;
    bottom: auto !important;
    line-height: 1 !important;
  }

  .keyshu-banner-ads .flickity-page-dots .dot {
    width: 7px;
    height: 7px;
    margin: 0 4px;
    background: #c9e6e3;
    border-radius: var(--radius-pill);
    opacity: 1;
    transition: all var(--transition-fast);
  }

  .keyshu-banner-ads .flickity-page-dots .dot.is-selected {
    width: 22px;
    background: var(--color-primary);
  }
}

@media (min-width: 850px) {
  /* =========================================================
     PRODUCT CARD
     WooCommerce product item styling
  ========================================================= */
  /* =========================================================
     KEYSHU - CARD SẢN PHẨM CHUNG TRANG CHỦ
     Dùng trực tiếp class có sẵn của Flatsome + WooCommerce
     Không cần thêm class mới vào HTML
  ========================================================= */
  .product-small {
    --keyshu-border: var(--color-border-soft);
    --keyshu-green: var(--color-success);
    --keyshu-muted: var(--color-muted);
    --keyshu-price: var(--color-price);
    --keyshu-primary: var(--color-primary);
    --keyshu-primary-dark: #00796b;
    --keyshu-red: #f44336;
    --keyshu-red-dark: #c62828;
    --keyshu-sale: var(--color-sale);
    --keyshu-text: var(--color-heading-strong);
  }

  /* =========================================================
     1. RESET CARD FLATSOME
  ========================================================= */
  .product-small > .col-inner {
    height: 100%;
  }

  .product-small .box {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--color-white) !important;
    border: 1px solid var(--keyshu-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }

  .product-small:hover .box {
    border-color: rgba(3, 176, 177, 0.18) !important;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  /* =========================================================
     2. ẢNH SẢN PHẨM
  ========================================================= */
  .product-small .box-image {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: 230px !important;
    padding: 8px !important;
    overflow: hidden !important;
    background: var(--color-white) !important;
    border-radius: 12px 12px 0 0 !important;
  }

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

  .product-small .box-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 30px 5px 30px 30px !important;
    object-fit: cover !important;
    transition: transform 0.35s ease;
  }

  .product-small:hover .box-image img {
    transform: scale(1.04);
  }

  .product-small .box-image .back-image {
    border-radius: 30px 5px 30px 30px !important;
  }

  /* Ẩn label hết hàng mặc định nằm đè trên ảnh */
  .product-small .out-of-stock-label {
    display: none !important;
  }

  /* Sản phẩm hết hàng: ảnh xám nhẹ */
  .product-small.out-of-stock .box-image img,
.product-small.outofstock .box-image img {
    filter: grayscale(100%) opacity(0.62);
  }

  /* =========================================================
     3. BADGE SALE WOOCOMMERCE / FLATSOME
  ========================================================= */
  .product-small .badge-container {
    top: 12px !important;
    left: 16px !important;
    z-index: 5 !important;
  }

  .product-small .badge,
.product-small .badge-inner,
.product-small .badge-circle {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  .product-small .badge-inner {
    padding: 5px 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
    background: var(--keyshu-sale) !important;
    box-shadow: none !important;
  }

  .product-small .badge-inner .onsale {
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
  }

  .product-small .badge-inner .onsale::before {
    content: none !important;
  }

  /* =========================================================
     4. NỘI DUNG CARD
  ========================================================= */
  .product-small .box-text-products {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 12px !important;
    text-align: left !important;
  }

  /* Ẩn danh mục nhỏ phía trên tên sản phẩm */
  .product-small .product-cat {
    display: none !important;
  }

  /* Tên sản phẩm */
  .product-small .product-title {
    display: -webkit-box;
    min-height: 34px !important;
    margin: 0 0 3px !important;
    overflow: hidden;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--keyshu-text) !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .product-small .product-title a {
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    color: var(--keyshu-text) !important;
  }

  .product-small .product-title a:hover {
    color: var(--keyshu-primary) !important;
  }

  /* =========================================================
     5. ĐÁNH GIÁ SAO + SỐ LƯỢNG ĐÁNH GIÁ
  ========================================================= */
  .product-small .price-wrapper {
    display: block !important;
    margin-top: 2px !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  /* Sao WooCommerce */
  .product-small .star-rating {
    display: inline-block !important;
    width: 75px !important;
    height: 14px !important;
    margin: 0 4px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    color: var(--color-rating) !important;
    vertical-align: middle !important;
  }

  /* Sao nền xám */
  .product-small .star-rating::before {
    position: absolute !important;
    top: 0;
    left: 0;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    color: #d9e2e5 !important;
    content: "★★★★★" !important;
  }

  /* Không dùng nội dung after cũ */
  .product-small .star-rating::after {
    content: none !important;
  }

  /* Sao vàng thật theo width WooCommerce */
  .product-small .star-rating span {
    display: block !important;
    height: 14px !important;
    padding-top: 14px !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 0;
    left: 0;
    font-size: 0 !important;
  }

  .product-small .star-rating span::before {
    position: absolute !important;
    top: 0;
    left: 0;
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
    color: var(--color-rating) !important;
    content: "★★★★★" !important;
  }

  /* Số lượng đánh giá */
  .product-small .review-count {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 13px !important;
    white-space: nowrap !important;
    color: var(--keyshu-muted) !important;
    vertical-align: middle !important;
  }

  .product-small .review-count::before,
.product-small .review-count::after {
    content: none !important;
  }

  .product-small .price ins .amount,
.product-small .price ins bdi {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--keyshu-price) !important;
  }

  /* Giá cũ */
  .product-small .price del {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: line-through !important;
    color: var(--color-muted-2) !important;
    opacity: 1 !important;
  }

  .product-small .price del .amount,
.product-small .price del bdi {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--color-muted-2) !important;
  }

  .product-small .price .badge-inner {
    border-radius: 4px !important;
  }

  /* =========================================================
     7. TRẠNG THÁI KHO
  ========================================================= */
  .product-small .price-wrapper::after {
    display: block;
    margin-top: 6px !important;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
  }

  .product-small.instock .price-wrapper::after {
    color: var(--keyshu-green);
    content: "✓ Còn hàng";
  }

  .product-small.out-of-stock .price-wrapper::after,
.product-small.outofstock .price-wrapper::after {
    color: var(--keyshu-price);
    content: "✖ Hết hàng";
  }

  /* =========================================================
     8. NÚT THÊM GIỎ HÀNG
  ========================================================= */
  .product-small .add-to-cart-button {
    margin-top: auto !important;
    padding-top: 8px !important;
  }

  .product-small .add-to-cart-button .button {
    display: grid !important;
    grid-template-columns: 1fr 36px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
    background: linear-gradient(135deg, var(--keyshu-red) 0%, var(--keyshu-red-dark) 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 15px rgba(198, 40, 40, 0.2) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }

  /* Đường kẻ giữa text và icon */
  .product-small .add-to-cart-button .button::before {
    width: 1px;
    height: 100%;
    position: absolute !important;
    top: 0;
    right: 36px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
    content: "" !important;
  }

  /* Icon giỏ hàng Font Awesome 7 */
  .product-small .add-to-cart-button .button::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: var(--font-icon);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    border-left: none !important;
    transform-origin: center center;
    transition: transform var(--transition-normal);
    content: "\f217";
  }

  .product-small .add-to-cart-button .button:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    box-shadow: 0 8px 20px rgba(183, 28, 28, 0.3) !important;
    transform: translateY(-2px);
  }

  /* Khi hover chỉ icon giỏ hàng quay */
  .product-small .add-to-cart-button .button:hover::after {
    animation: keyshu-cart-icon-spin 0.55s ease-in-out 1;
  }
}

@keyframes keyshu-cart-icon-spin {
  from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
}

@media (min-width: 850px) {
  /* Nút hết hàng */
  .product-small.out-of-stock .add-to-cart-button .button,
.product-small.outofstock .add-to-cart-button .button {
    color: var(--color-white) !important;
    background: #cbd5e0 !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  /* =========================================================
     FIX ICON YÊU THÍCH + XEM NHANH THẲNG HÀNG
     Dùng class có sẵn của Flatsome/WooCommerce
     Kết quả:
     - 2 icon nằm cùng 1 cột bên phải ảnh
     - Căn giữa thẳng hàng
     - Có khoảng cách đều nhau
  ========================================================= */

  /* Cho box-image làm mốc định vị icon */
  .product-small .box-image {
    position: relative !important;
  }

  /* =========================================================
     1. ICON YÊU THÍCH
  ========================================================= */

  /* Khối chứa icon yêu thích */
  .product-small .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;
    inset: 18px 18px auto auto !important;
    z-index: 8 !important;
    opacity: 0;
    transform: translateX(8px);
    transition: all var(--transition-fast);
  }

  /* Hiện icon khi hover card */
  .product-small:hover .box-image .image-tools.top.right {
    opacity: 1;
    transform: translateX(0);
  }

  /* Reset khối wishlist bên trong */
  .product-small .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;
  }

  /* Nút yêu thích */
  .product-small .wishlist-button,
.product-small .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;
    line-height: 1 !important;
    color: var(--color-primary) !important;
    background: var(--color-white) !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;
  }

  /* Icon trái tim bên trong */
  .product-small .wishlist-button i,
.product-small .wishlist-icon .button i,
.product-small .wishlist-icon svg {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* Hover yêu thích */
  .product-small .wishlist-button:hover,
.product-small .wishlist-icon .button:hover {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
  }

  /* =========================================================
     2. ICON XEM NHANH
  ========================================================= */

  /* Khối chứa xem nhanh - đặt cùng right với icon yêu thích */
  .product-small .box-image .grid-tools {
    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;
    inset: 60px 18px auto auto !important;
    z-index: 8 !important;
    opacity: 0;
    transform: translateX(8px);
    transition: all var(--transition-fast);
  }

  /* Hiện icon xem nhanh khi hover card */
  .product-small:hover .box-image .grid-tools {
    opacity: 1;
    transform: translateX(0);
  }

  /* Nút xem nhanh đổi thành icon tròn */
  .product-small .quick-view {
    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;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    color: var(--color-primary) !important;
    background: var(--color-white) !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;
  }

  /* Icon mắt Font Awesome 7 */
  .product-small .quick-view::before {
    font-family: var(--font-icon);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    content: "\f06e";
  }

  /* Hover xem nhanh */
  .product-small .quick-view:hover {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
  }

  /* =========================================================
     3. TẮT HIỆU ỨNG SLIDE-IN MẶC ĐỊNH CỦA FLATSOME
     Tránh bị lệch vị trí khi hover
  ========================================================= */
  .product-small .box-image .hover-slide-in,
.product-small .box-image .show-on-hover {
    transform: none;
  }

  /* Nhưng vẫn giữ hiệu ứng trượt nhẹ cho 2 icon đã set ở trên */
  .product-small .box-image .image-tools.top.right,
.product-small .box-image .grid-tools {
    transform: translateX(8px);
  }

  .product-small:hover .box-image .image-tools.top.right,
.product-small:hover .box-image .grid-tools {
    transform: translateX(0);
  }

  /* =========================================================
     KEYSHU - ẨN TEXT "ADD TO WISHLIST" KHI HOVER ICON YÊU THÍCH
     Chỉ giữ lại icon trái tim tròn
  ========================================================= */

  /* Ẩn popup tooltip đen của Wishlist */
  .product-small .wishlist-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Ẩn text Add to wishlist nếu nó nằm trong link */
  .product-small .yith-wcwl-add-to-wishlist span,
.product-small .add_to_wishlist span,
.product-small .single_add_to_wishlist span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Đảm bảo link wishlist không bung khung text */
  .product-small .yith-wcwl-add-button,
.product-small .add_to_wishlist,
.product-small .single_add_to_wishlist {
    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;
    overflow: hidden !important;
  }

  /* Icon SVG trái tim nằm giữa */
  .product-small .yith-wcwl-icon-svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  /* =========================================================
     KEYSHU - BADGE SALE NẰM NGAY CẠNH GIÁ
  ========================================================= */
  .product-small .price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 7px !important;
    color: var(--color-price) !important;
  }

  .product-small .price ins {
    order: 1 !important;
    text-decoration: none !important;
  }

  .product-small .price del {
    order: 2 !important;
  }

  .product-small .price .badge-container {
    display: inline-flex !important;
    align-items: center !important;
    order: 3 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
  }

  .product-small .price .badge,
.product-small .price .badge-circle,
.product-small .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;
  }

  .product-small .price .badge-inner {
    padding: 4px 7px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
    background: var(--color-sale) !important;
    box-shadow: none !important;
  }

  .product-small .price .badge-inner .onsale {
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
  }

  .product-small .price::after {
    display: none !important;
    content: none !important;
  }

  /* =========================================================
     KEYSHU - ĐIỂM ĐÁNH GIÁ TRUNG BÌNH: 4.8/5
  ========================================================= */
  .product-small .keyshu-rating-score {
    display: inline-block !important;
    margin: 0 5px 0 2px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    color: var(--color-primary) !important;
    vertical-align: middle !important;
  }

  /* Giữ sao + điểm + số lượng đánh giá cùng 1 hàng */
  .product-small .price-wrapper .star-rating,
.product-small .price-wrapper .keyshu-rating-score,
.product-small .price-wrapper .review-count {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* =========================================================
     KEYSHU - ADD TO CART AJAX
     Yêu cầu:
     1. Bấm "Thêm Giỏ Hàng" -> text + icon giỏ hàng đứng yên
     2. Hiện icon loading Font Awesome f110 quay giữa nút
     3. Thêm xong -> đổi chính nút đó thành "Xem Giỏ Hàng"
  ========================================================= */

  /* =========================================================
     KEYSHU - FIX LOADING ADD TO CART
     Mục tiêu:
     - Text "Thêm Giỏ Hàng" giữ nguyên vị trí
     - Icon giỏ hàng giữ đúng bên phải nút
     - Icon loading f110 quay chính giữa nút
     - Không để icon loading đè icon giỏ hàng
  ========================================================= */

  /* =========================================================
     1. NÚT KHI ĐANG LOADING
  ========================================================= */
  .product-small .add-to-cart-button .button.keyshu-cart-loading {
    display: grid !important;
    grid-template-columns: 1fr 36px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    color: var(--color-white) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* Tắt hover nâng nút khi đang loading */
  .product-small .add-to-cart-button .button.keyshu-cart-loading:hover {
    transform: none !important;
  }

  /* =========================================================
     2. ĐƯỜNG KẺ GIỮA TEXT VÀ ICON
  ========================================================= */
  .product-small .add-to-cart-button .button.keyshu-cart-loading::before {
    width: 1px !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    right: 36px !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    pointer-events: none !important;
    content: "" !important;
  }

  /* =========================================================
     3. ICON GIỎ HÀNG - ÉP CỨNG BÊN PHẢI
     Quan trọng:
     - Không để icon này nằm giữa nút
     - Không dùng grid placement mặc định
  ========================================================= */
  .product-small .add-to-cart-button .button.keyshu-cart-loading::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 0 auto auto !important;
    z-index: 4 !important;
    font-family: var(--font-icon) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
    content: "\f217" !important;
  }

  /* Khi loading thì icon giỏ hàng không quay */
  .product-small .add-to-cart-button .button.keyshu-cart-loading:hover::after {
    transform: none !important;
    animation: none !important;
  }

  /* =========================================================
     4. ICON LOADING f110 - NẰM CHÍNH GIỮA TOÀN BỘ NÚT
     Icon này là span do JS chèn vào
  ========================================================= */
  .product-small .add-to-cart-button .button.keyshu-cart-loading .keyshu-cart-spinner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    z-index: 6 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  /* Icon loading Font Awesome f110 */
  .product-small .add-to-cart-button .button.keyshu-cart-loading .keyshu-cart-spinner::before {
    display: block !important;
    font-family: var(--font-icon) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    animation: keyshu-f110-loading-spin 0.75s linear infinite !important;
    content: "\f110" !important;
  }
}

/* Animation loading */
@keyframes keyshu-f110-loading-spin {
  from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
}

@media (min-width: 850px) {
  /* =========================================================
     5. CHẶN LOADING MẶC ĐỊNH CỦA FLATSOME / WOOCOMMERCE
     Tránh theme tự kéo ::after ra giữa nút
  ========================================================= */
  .product-small .add-to-cart-button .button.loading::after,
.product-small .add-to-cart-button .button.added::after,
.product-small .add-to-cart-button .button.keyshu-cart-loading.loading::after,
.product-small .add-to-cart-button .button.keyshu-cart-loading.added::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    font-family: var(--font-icon) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: var(--color-white) !important;
    transform: none !important;
    animation: none !important;
    /* content: "\f217" !important; */
  }

  /* =========================================================
     6. NÚT XEM GIỎ HÀNG SAU KHI THÊM XONG
  ========================================================= */
  .product-small .add-to-cart-button .button.keyshu-view-cart {
    display: grid !important;
    grid-template-columns: 1fr 36px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--color-white) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, #00897b 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 15px rgba(3, 176, 177, 0.24) !important;
    transform: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .product-small .add-to-cart-button .button.keyshu-view-cart:hover {
    background: linear-gradient(135deg, #009fa0 0%, #00796b 100%) !important;
    box-shadow: 0 8px 20px rgba(3, 176, 177, 0.32) !important;
    transform: translateY(-2px) !important;
  }

  /* Đường kẻ của nút xem giỏ hàng */
  .product-small .add-to-cart-button .button.keyshu-view-cart::before {
    width: 1px !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    right: 36px !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.26) !important;
    pointer-events: none !important;
    content: "" !important;
  }

  /* Icon mũi tên bên phải */
  .product-small .add-to-cart-button .button.keyshu-view-cart::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    font-family: var(--font-icon) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
    content: "\f061" !important;
  }

  /* Ẩn spinner khi đã thành Xem Giỏ Hàng */
  .product-small .add-to-cart-button .button.keyshu-view-cart .keyshu-cart-spinner {
    display: none !important;
  }

  /* =========================================================
     7. ẨN LINK VIEW CART MẶC ĐỊNH WOOCOMMERCE
  ========================================================= */
  .product-small .add-to-cart-button + .added_to_cart,
.product-small .add-to-cart-button .added_to_cart,
.product-small a.added_to_cart.wc-forward {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }

  /* =========================================================
     PRODUCT CATALOG SECTION
  ========================================================= */
  /* =========================================================
     KEYSHU - HEADER GIẢI PHÁP CHO LÀN DA
     Dùng cho HTML Flatsome:
     .keyshu-product-skin-solutions
  ========================================================= */
  .keyshu-product-skin-solutions {
    --keyshu-border: rgba(0, 150, 136, 0.2);
    --keyshu-primary: var(--color-primary);
    --keyshu-primary-dark: #00796b;
    --keyshu-soft: #e0f2f1;
    --keyshu-text: #00796b;
  }

  /* =========================================================
     1. ROW HEADER: TIÊU ĐỀ + MENU + XEM TẤT CẢ
  ========================================================= */
  .keyshu-product-skin-solutions .section-content > .row:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto 30px !important;
    padding: 0 0 10px !important;
    position: relative;
    border-bottom: 1px solid var(--keyshu-border);
  }

  /* Đường line nhấn màu xanh bên dưới giống section mẫu */
  .keyshu-product-skin-solutions .section-content > .row:first-child::after {
    width: 200px;
    height: 3px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: linear-gradient(
          90deg,
          var(--keyshu-primary) 0%,
          transparent 100%
        );
    border-radius: 99px;
    content: "";
  }

  /* Reset cột Flatsome */
  .keyshu-product-skin-solutions .section-content > .row:first-child > .col,
.keyshu-product-skin-solutions .section-content > .row:first-child > .col > .col-inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cột tiêu đề */
  .keyshu-product-skin-solutions .section-content > .row:first-child > .col:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Cột menu */
  .keyshu-product-skin-solutions .section-content > .row:first-child > .col:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Cột nút xem tất cả */
  .keyshu-product-skin-solutions .section-content > .row:first-child > .col:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
  }

  /* =========================================================
     2. TIÊU ĐỀ GIẢI PHÁP CHO LÀN DA
  ========================================================= */
  .keyshu-product-skin-solutions .section-content > .row:first-child h2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 32px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    color: var(--color-white) !important;
    background: linear-gradient(
          135deg,
          var(--keyshu-primary) 0%,
          var(--keyshu-primary-dark) 100%
        );
    border-radius: 20px 4px 20px 4px;
    box-shadow: 0 4px 15px rgba(0, 121, 107, 0.2);
  }

  /* Icon lá bên trái tiêu đề */
  .keyshu-product-skin-solutions .section-content > .row:first-child h2::before {
    font-family: var(--font-icon);
    font-size: 14px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.85);
    content: "\f4d8";
  }

  /* Nếu Font Awesome 7 chưa load đúng, mở dòng này và đổi 7 thành 6 */

  /*
  .keyshu-product-skin-solutions .section-content > .row:first-child h2::before {
    font-family: "Font Awesome 6 Free";
  }
  */

  /* =========================================================
     3. MENU LỌC DA
  ========================================================= */
  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Xóa gạch chia mặc định của Flatsome */
  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link::before,
.keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link::after {
    display: none !important;
  }

  /* Nút menu */
  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 22px !important;
    text-decoration: none !important;
    color: var(--keyshu-text) !important;
    background: rgba(224, 242, 241, 0.6) !important;
    border: 1px solid rgba(0, 121, 107, 0.1) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
  }

  /* Text menu */
  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link__text {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    color: inherit !important;
  }

  /* Item đầu tiên đang active */
  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link:first-child .ux-menu-link__link {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    border-color: var(--keyshu-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.25) !important;
  }

  /* Hover menu */
  .keyshu-product-skin-solutions .section-content > .row:first-child .ux-menu-link__link:hover {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    border-color: var(--keyshu-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.25) !important;
    transform: translateY(-2px);
  }

  /* =========================================================
     4. NÚT XEM TẤT CẢ
  ========================================================= */
  .keyshu-product-skin-solutions .section-content > .row:first-child .button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--keyshu-primary) !important;
    background: transparent !important;
    border: 1.5px solid var(--keyshu-primary) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    transition: all var(--transition-normal);
  }

  /* Text trong nút */
  .keyshu-product-skin-solutions .section-content > .row:first-child .button.primary span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  /* Icon mũi tên */
  .keyshu-product-skin-solutions .section-content > .row:first-child .button.primary::after {
    font-family: var(--font-icon);
    font-size: 13px;
    font-weight: 900;
    color: inherit;
    transition: transform var(--transition-normal);
    content: "\f178";
  }

  /* Nếu Font Awesome 7 chưa load đúng, mở dòng này */

  /*
  .keyshu-product-skin-solutions .section-content > .row:first-child .button.primary::after {
    font-family: "Font Awesome 6 Free";
  }
  */
  .keyshu-product-skin-solutions .section-content > .row:first-child .button.primary:hover {
    color: var(--color-white) !important;
    background: var(--keyshu-primary) !important;
    border-color: var(--keyshu-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.3) !important;
    transform: scale(1.05);
  }

  .keyshu-product-skin-solutions .section-content > .row:first-child .button.primary:hover::after {
    transform: translateX(4px);
  }

  /* =========================================================
     5. SỬA KHOẢNG CÁCH VỚI DANH SÁCH SẢN PHẨM
  ========================================================= */

  /* Row sản phẩm nằm dưới header */
  .keyshu-product-skin-solutions .section-content > .row:nth-child(2) {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Không để Flatsome kéo row-collapse sát mép */
  .keyshu-product-skin-solutions .section-content > .row:nth-child(2) > .col {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .keyshu-product-skin-solutions .row.row-small {
    max-width: 1320px !important;
  }

  /* =========================================================
     KEYSHU - BACKGROUND SECTION GIẢI PHÁP CHO LÀN DA
     Áp dụng cho section Flatsome:
     .keyshu-product-skin-solutions
  ========================================================= */
  .keyshu-product-skin-solutions {
    width: 100%;
    padding: 30px 0px 150px !important;
    overflow: hidden;
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg-soft-mint) 100%);
    border-radius: 60px 60px 0 0;
  }

  /* Shape trang trí mờ bên trái giống style section giải pháp làn da */
  .keyshu-product-skin-solutions::after {
    width: 500px;
    height: 500px;
    position: absolute;
    bottom: 5%;
    left: -50px;
    z-index: -1;
    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");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-20deg);
    pointer-events: none;
    content: "";
  }

  /* Giữ nội dung nằm trên background trang trí */
  .keyshu-product-skin-solutions .section-content {
    position: relative;
    z-index: 2;
  }

  /* Container tổng bên trong section */
  .keyshu-product-skin-solutions .section-content > .row {
    position: relative;
    z-index: 2;
  }

  /* =========================================================
     KEYSHU - CÂU CHUYỆN NGUYÊN LIỆU
     Layout bubble:
     - Không đè nhau
     - Không đè nút khám phá ngay
     - Thu hẹp khoảng trống
     - Không dùng ID Flatsome
  ========================================================= */
  /* Biến cục này đã được gom vào ROOT VARIABLES ở đầu file. */

  /* =========================================================
     1. SECTION CHÍNH
  ========================================================= */
  .keyshu-ingredient-story {
    width: 100%;
    min-height: 820px;
    margin-top: -80px;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    z-index: 4;
    background: linear-gradient(180deg, var(--color-bg-soft-mint) 0%, #f0f9ff 100%);
    border-radius: 100px 100px 0 0;
  }

  .keyshu-ingredient-story .section-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

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

  .keyshu-ingredient-story .effect-sparkle {
    display: none !important;
  }

  .keyshu-ingredient-story .section-content {
    min-height: 820px;
    position: relative;
    z-index: 2;
  }

  .keyshu-ingredient-story > .section-content > .row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1440px !important;
    min-height: 820px;
    margin: 0 auto !important;
    padding: 0 42px !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col {
    padding-bottom: 0 !important;
  }

  /* =========================================================
     2. CỘT TRÁI - HÌNH SẢN PHẨM
  ========================================================= */
  .keyshu-ingredient-story > .section-content > .row > .col:first-child {
    flex-basis: 53% !important;
    max-width: 53% !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 760px;
    position: relative;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img {
    width: 100% !important;
    margin: 0 !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child .img-inner {
    overflow: visible !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:first-child img {
    width: 150% !important;
    max-width: 1120px !important;
    height: auto !important;
    filter: drop-shadow(0 48px 70px rgba(18, 72, 78, 0.28));
    object-fit: contain !important;
    transform: translateX(-260px) translateY(-50px) rotate(-2deg);
  }

  /* =========================================================
     3. CỘT PHẢI - TEXT
  ========================================================= */
  .keyshu-ingredient-story > .section-content > .row > .col:last-child {
    flex-basis: 47% !important;
    max-width: 47% !important;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:last-child > .col-inner {
    min-height: 720px;
    padding: 34px 0 0 22px !important;
    position: relative;
  }

  .keyshu-ingredient-story > .section-content > .row > .col:last-child > .col-inner::before {
    width: 3px;
    height: 156px;
    position: absolute;
    top: 36px;
    left: -10px;
    background: linear-gradient(
          180deg,
          var(--keyshu-primary) 0%,
          rgba(3, 176, 177, 0.45) 55%,
          rgba(3, 176, 177, 0) 100%
        );
    border-radius: var(--radius-pill);
    content: "";
  }

  .keyshu-ingredient-story blockquote {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin: 0 0 22px !important;
    padding: 0 22px !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-black);
    background: rgba(255, 255, 255, 0.72);
    border: none !important;
    border-radius: var(--radius-pill);
    box-shadow: none !important;
  }

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

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

  .keyshu-ingredient-story h2.uppercase {
    max-width: 760px;
    margin: 0 !important;
    font-size: 49px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -1.4px;
    text-transform: uppercase;
    color: var(--keyshu-text-dark) !important;
  }

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

  .keyshu-ingredient-story h2.uppercase + p {
    max-width: 760px;
    margin: 24px 0 0 !important;
    padding-right: 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.85;
    color: var(--color-black);
  }

  /* =========================================================
     4. KHU VỰC BUBBLE
     Dùng absolute để rải tự nhiên.
     Đã thu hẹp vùng và chừa riêng khoảng cho nút.
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles {
    width: 100% !important;
    max-width: 660px !important;
    padding: 0 !important;
  }

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

  .keyshu-ingredient-story .keyshu-bubbles > .col > .col-inner {
    display: block !important;
    min-height: 390px !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* =========================================================
     5. BUBBLE ITEM
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles .box {
    width: 112px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: absolute !important;
    z-index: 2;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
    animation-name: keyshuBubbleFloatSafe;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box:hover {
    z-index: 20;
    animation-play-state: paused;
  }

  /* =========================================================
     5.1. VỊ TRÍ BUBBLE MỚI
     Yêu cầu:
     - Không theo trật tự cứng
     - Mỗi bubble có khoảng cách rõ
     - Không đè nhau
     - Không đè nút CTA
  ========================================================= */

  /* Bubble 2: Rau Má - trái trên */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(2) {
    --bubble-r1: -3deg;
    --bubble-r2: -5deg;
    --bubble-r3: 4deg;
    --bubble-x1: 0px;
    --bubble-x2: -5px;
    --bubble-x3: 6px;
    --bubble-y1: 0px;
    --bubble-y2: -7px;
    --bubble-y3: 7px;
    top: 4px !important;
    left: 34px !important;
    animation-delay: -0.6s;
  }

  /* Bubble 3: Cúc La Mã - trên giữa */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(3) {
    --bubble-r1: 3deg;
    --bubble-r2: 6deg;
    --bubble-r3: -5deg;
    --bubble-x1: 0px;
    --bubble-x2: 7px;
    --bubble-x3: -7px;
    --bubble-y1: 0px;
    --bubble-y2: -9px;
    --bubble-y3: 7px;
    top: 0 !important;
    left: 268px !important;
    animation-delay: -1.4s;
  }

  /* Bubble 4: Hành Tím - phải trên */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(4) {
    --bubble-r1: 4deg;
    --bubble-r2: 6deg;
    --bubble-r3: -5deg;
    --bubble-x1: 0px;
    --bubble-x2: 6px;
    --bubble-x3: -6px;
    --bubble-y1: 0px;
    --bubble-y2: -7px;
    --bubble-y3: 7px;
    top: 54px !important;
    left: 500px !important;
    animation-delay: -0.3s;
  }

  /* Bubble 5: Sâm Ngọc Linh - trái giữa */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(5) {
    --bubble-r1: -3deg;
    --bubble-r2: 5deg;
    --bubble-r3: -5deg;
    --bubble-x1: 0px;
    --bubble-x2: 7px;
    --bubble-x3: -7px;
    --bubble-y1: 0px;
    --bubble-y2: -7px;
    --bubble-y3: 7px;
    top: 120px !important;
    left: 108px !important;
    animation-delay: -1.9s;
  }

  /* Bubble 1: Tràm Trà - giữa */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(1) {
    --bubble-r1: 2deg;
    --bubble-r2: 6deg;
    --bubble-r3: -5deg;
    --bubble-x1: 0px;
    --bubble-x2: 7px;
    --bubble-x3: -7px;
    --bubble-y1: 0px;
    --bubble-y2: -9px;
    --bubble-y3: 7px;
    top: 132px !important;
    left: 342px !important;
    animation-delay: 0s;
  }

  /* Bubble 7: Dầu Jojoba - phải dưới giữa */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(7) {
    --bubble-r1: -4deg;
    --bubble-r2: 6deg;
    --bubble-r3: -6deg;
    --bubble-x1: 0px;
    --bubble-x2: 6px;
    --bubble-x3: -6px;
    --bubble-y1: 0px;
    --bubble-y2: -7px;
    --bubble-y3: 7px;
    top: 178px !important;
    left: 520px !important;
    animation-delay: -2.3s;
  }

  /* Bubble 6: Thiên Lam Tinh - dưới giữa, đã nâng lên khỏi nút */
  .keyshu-ingredient-story .keyshu-bubbles .box:nth-of-type(6) {
    --bubble-r1: 4deg;
    --bubble-r2: -6deg;
    --bubble-r3: 5deg;
    --bubble-x1: 0px;
    --bubble-x2: 7px;
    --bubble-x3: -7px;
    --bubble-y1: 0px;
    --bubble-y2: -7px;
    --bubble-y3: 7px;
    top: 190px !important;
    left: 248px !important;
    animation-delay: -1.1s;
  }
}

/* Chuyển động nhẹ để không va nhau */
@keyframes keyshuBubbleFloatSafe {
  0%,
    100% {
      transform: translate(var(--bubble-x1), var(--bubble-y1)) rotate(var(--bubble-r1)) scale(1);
    }

    32% {
      transform: translate(var(--bubble-x2), var(--bubble-y2)) rotate(var(--bubble-r2)) scale(1.018);
    }

    64% {
      transform: translate(var(--bubble-x3), var(--bubble-y3)) rotate(var(--bubble-r3)) scale(0.992);
    }
}

@media (min-width: 850px) {
  /* =========================================================
     6. ẢNH TRÒN TRONG BUBBLE
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles .box-image {
    width: 84px !important;
    height: 84px !important;
    margin: 0 auto !important;
    padding: 4px !important;
    overflow: hidden !important;
    /* background: rgba(255, 255, 255, 0.88);
    border: 4px solid rgba(255, 255, 255, 0.96); */
    border-radius: 50% !important;
    box-shadow: 0 10px 24px rgba(0, 120, 135, 0.12),
          inset 0 0 0 1px rgba(3, 176, 177, 0.08);
    transition: border-color 0.28s ease,
          box-shadow 0.28s ease,
          transform 0.28s ease,
          background 0.28s ease;
  }

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

  .keyshu-ingredient-story .keyshu-bubbles .box-image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    transition: transform 0.35s ease;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box:hover .box-image {
    background: var(--color-white);
    border-color: var(--keyshu-primary) !important;
    box-shadow: 0 0 0 5px rgba(3, 176, 177, 0.14),
          0 18px 38px rgba(3, 176, 177, 0.28),
          inset 0 0 0 1px rgba(3, 176, 177, 0.2);
    transform: scale(1.08);
  }

  .keyshu-ingredient-story .keyshu-bubbles .box:hover .box-image img {
    transform: scale(1.06);
  }

  /* =========================================================
     7. LABEL DƯỚI BUBBLE
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles .box-text {
    padding: 0 !important;
    background: transparent !important;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box-text-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: background 0.28s ease,
          color 0.28s ease,
          border-color 0.28s ease,
          box-shadow 0.28s ease,
          transform 0.28s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .keyshu-ingredient-story .keyshu-bubbles .box p {
    margin: 0 !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: #7a878d;
    transition: color 0.28s ease;
  }

  .keyshu-ingredient-story .keyshu-bubbles .box:hover .box-text-inner {
    background: var(--color-white);
    border-color: rgba(3, 176, 177, 0.28);
    box-shadow: 0 8px 18px rgba(3, 176, 177, 0.12);
    transform: translateY(3px);
  }

  .keyshu-ingredient-story .keyshu-bubbles .box:hover p {
    color: var(--keyshu-primary);
  }

  /* =========================================================
     8. NÚT KHÁM PHÁ NGAY
     Đẩy xuống dưới bubble, không bị đè
  ========================================================= */
  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    height: 60px;
    margin: 0 !important;
    padding: 0 22px 0 34px !important;
    overflow: hidden;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 60px !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--color-white) !important;
    background: linear-gradient(
          135deg,
          var(--keyshu-primary) 0%,
          #08c8c9 48%,
          var(--keyshu-primary-dark) 100%
        ) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 16px 34px rgba(3, 176, 177, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: all 0.28s ease;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge span {
    position: relative;
    z-index: 2;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge::before {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -80%;
    background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.28) 50%,
          rgba(255, 255, 255, 0) 100%
        );
    transform: skewX(-18deg);
    transition: all 0.55s ease;
    content: "";
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 18px;
    position: relative;
    z-index: 2;
    font-size: 18px;
    line-height: 36px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    transition: all 0.28s ease;
    content: "\2192";
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge:hover {
    box-shadow: 0 22px 42px rgba(3, 176, 177, 0.38),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-4px);
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge:hover::before {
    left: 120%;
  }

  .keyshu-ingredient-story .keyshu-bubbles .button.primary.is-xxlarge:hover::after {
    transform: translateX(5px);
  }

  /* =========================================================
     KEYSHU - TIÊU CHUẨN SẢN XUẤT KHÉP KÍN
     Chỉ dùng class - không dùng ID
     Dùng cho Flatsome / UX Builder
  ========================================================= */

  /* =========================================================
     1. SECTION TỔNG
  ========================================================= */
  .manufacturing-process-section {
    width: 100% !important;
    margin-top: -60px !important;
    padding: 92px 0 78px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 5 !important;
    background: linear-gradient(180deg, #eefaff 0%, var(--color-bg-soft-mint) 100%) !important;
    border-radius: 96px 96px 0 0 !important;
  }

  /* Tắt nền mặc định Flatsome */
  .manufacturing-process-section .section-bg {
    background: transparent !important;
  }

  /* Container chính */
  .manufacturing-process-section > .section-content {
    width: min(1280px, calc(100% - 64px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Decor góc trái */
  .manufacturing-process-section::before {
    width: 220px !important;
    height: 220px !important;
    position: absolute !important;
    top: -92px !important;
    left: -66px !important;
    background: rgba(3, 176, 177, 0.045) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    content: "" !important;
  }

  /* Decor góc phải dưới */
  .manufacturing-process-section::after {
    width: 310px !important;
    height: 310px !important;
    position: absolute !important;
    right: -110px !important;
    bottom: -120px !important;
    background: rgba(3, 176, 177, 0.045) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    content: "" !important;
  }

  /* =========================================================
     2. RESET ROW / COL FLATSOME
  ========================================================= */
  .manufacturing-process-section .row {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .manufacturing-process-section .row > .col {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }

  .manufacturing-process-section .col-inner {
    width: 100% !important;
  }

  /* =========================================================
     3. HEADER: TIÊU ĐỀ + NÚT
  ========================================================= */
  .manufacturing-process-section .row-small.align-middle {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
    gap: 32px !important;
    margin-bottom: 38px !important;
  }

  .manufacturing-process-section .row-small.align-middle > .col:first-child {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .manufacturing-process-section .row-small.align-middle > .col:last-child {
    display: flex !important;
    flex-basis: auto !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    padding-top: 4px !important;
  }

  /* Tiêu đề */
  .manufacturing-process-heading h2 {
    max-width: 780px !important;
    margin: 0 !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    color: #1f5960 !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;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 18px 0 22px !important;
    position: relative !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 44px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 14px 32px rgba(3, 176, 177, 0.22) !important;
    transition: all var(--transition-fast) !important;
  }

  .manufacturing-process-section a.button.primary span {
    position: relative !important;
    z-index: 2 !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
  }

  .manufacturing-process-section a.button.primary::after {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.24) !important;
    border-radius: 50% !important;
    content: "→" !important;
  }

  .manufacturing-process-section a.button.primary:hover {
    color: var(--color-white) !important;
    background: #029b9d !important;
    box-shadow: 0 18px 34px rgba(3, 176, 177, 0.28) !important;
    transform: translateY(-2px) !important;
  }

  /* =========================================================
     4. GRID 3 CỘT
     Cột bên phải cao bao nhiêu thì cột trái + ảnh giữa kéo theo
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) {
    display: grid !important;
    grid-template-columns: 0.78fr 1.25fr 1.25fr !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* Reset 3 cột Flatsome */
  .manufacturing-process-section .row-small:not(.align-middle) > .col {
    flex-basis: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* Col-inner của cả 3 cột phải cao bằng hàng grid */
  .manufacturing-process-section .row-small:not(.align-middle) > .col > .col-inner {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* =========================================================
     5. CỘT TEXT BÊN TRÁI
     Quan trọng: cột trái kéo cao theo cột accordion
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child {
    align-self: stretch !important;
    height: 100% !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child .col-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 438px !important;
    padding: 14px 2px 0 0 !important;
  }

  /* Đoạn chữ đậm đầu */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child h3 {
    margin: 0 0 28px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.85 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #245b63 !important;
  }

  /* Đoạn mô tả thường */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.85 !important;
    color: #708890 !important;
  }

  /* Đoạn mô tả chính - giữ ở phía trên */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p:nth-of-type(1) {
    margin: 0 !important;
  }

  /* Chữ QUY TRÌNH - đẩy xuống sát đáy cột trái */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p:nth-of-type(2) {
    margin-top: auto !important;
    padding-top: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #93a9ae !important;
    border-top: 1px solid rgba(31, 89, 96, 0.12) !important;
  }

  /* Dòng 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-top: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: #245b63 !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:first-child p:nth-of-type(3) strong {
    font-weight: 800 !important;
    color: inherit !important;
  }

  /* =========================================================
     6. CỘT ẢNH GIỮA
     Ảnh tự kéo cao theo cột accordion bên phải
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) {
    align-self: stretch !important;
    height: 100% !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) .col-inner {
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 438px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) .img {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 438px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #eef7f7 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(24, 85, 91, 0.11),
          0 6px 16px rgba(24, 85, 91, 0.05) !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) .img-inner {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 438px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(2) img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 438px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* =========================================================
     7. ACCORDION BÊN PHẢI
  ========================================================= */
  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(3) {
    align-self: stretch !important;
    height: auto !important;
  }

  .manufacturing-process-section .row-small:not(.align-middle) > .col:nth-child(3) .col-inner {
    height: auto !important;
    min-height: 438px !important;
  }

  .manufacturing-process-section .accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 438px !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.45) !important;
    border: 1px solid rgba(3, 176, 177, 0.13) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: all var(--transition-fast) !important;
  }

  .manufacturing-process-section .accordion-item:hover {
    border-color: rgba(3, 176, 177, 0.25) !important;
    transform: translateY(-2px) !important;
  }

  .manufacturing-process-section .accordion-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    position: relative !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    color: #245b63 !important;
    background: transparent !important;
    border: none !important;
  }

  .manufacturing-process-section .accordion-title span {
    order: 1 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: inherit !important;
  }

  .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;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    color: #245b63 !important;
    background: rgba(255, 255, 255, 0.75) !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 {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: inherit !important;
    content: "+" !important;
  }

  .manufacturing-process-section .accordion-inner {
    height: auto !important;
    max-height: none !important;
    padding: 0 18px 20px !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
  }

  .manufacturing-process-section .accordion-inner p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
    color: #6f8286 !important;
  }

  /* =========================================================
     8. TRẠNG THÁI MỞ
     Hỗ trợ cả class keyshu-open từ JS
  ========================================================= */
  .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(--color-primary) !important;
    border-color: var(--color-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: var(--color-white) !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(--color-primary) !important;
    background: var(--color-white) !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.9) !important;
  }

  /* =========================================================
     KEYSHU - SECTION CHỨNG NHẬN CHẤT LƯỢNG
     Dùng cho Flatsome UX Builder
  ========================================================= */
  .keyshu-certificate-section {
    width: 100%;
    /* padding: 0px 20px 150px !important; */
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, var(--color-bg-soft-mint) 0%, var(--color-bg-soft-green) 100%);
  }

  /* Xóa padding mặc định của Flatsome bên trong section */
  .keyshu-certificate-section .section-content {
    padding-bottom: 190px;
    position: relative;
    z-index: 2;
  }

  /* Vòng tròn trang trí nền */
  .keyshu-certificate-section::before {
    position: absolute;
    inset: 0;
    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);
    pointer-events: none;
    content: "";
  }

  /* Khung tổng */
  .keyshu-cert-wrap {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* Tiêu đề */
  .keyshu-cert-heading {
    margin-bottom: 55px;
    text-align: center;
  }

  .keyshu-cert-heading h2 {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .keyshu-cert-heading p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #4f5b64;
  }

  /* Layout 2 cột */
  .keyshu-cert-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 90px;
    min-height: 560px;
  }

  /* Cột ảnh */
  .keyshu-cert-visual {
    min-width: 0;
    position: relative;
  }

  .keyshu-cert-deck {
    width: 100%;
    height: 540px;
    position: relative;
    perspective: 1500px;
  }

  /* Card giấy chứng nhận */
  .keyshu-cert-card {
    width: 450px;
    aspect-ratio: 1 / 1.414;
    padding: 10px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-white);
    border: 1px solid #e6f4f4;
    border-radius: 9px;
    box-shadow: 0 18px 38px rgba(17, 74, 80, 0.12),
          0 0 0 1px rgba(3, 176, 177, 0.04);
    transform-origin: bottom center;
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
  }

  .keyshu-cert-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Card đang active */
  .keyshu-cert-card.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 26px 60px rgba(3, 176, 177, 0.22),
          0 0 0 1px rgba(3, 176, 177, 0.22);
  }

  /* Nội dung bên phải */
  .keyshu-cert-info {
    /* max-width: 520px; */
    opacity: 1;
    transition: all 0.45s ease;
    text-align: justify;
  }

  .keyshu-cert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-bottom: 28px;
    padding: 0 22px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(3, 176, 177, 0.10);
    border-radius: var(--radius-pill);
  }

  .keyshu-cert-info h3 {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #30343b;
  }

  .keyshu-cert-info p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text);
  }

  /* =========================================================
     KEYSHU - NAV / DOTS CHỨNG NHẬN
     Giao diện giống ảnh mẫu
  ========================================================= */
  .keyshu-cert-nav {
    margin-top: -18px;
  }

  /* Nút tròn trái/phải */
  .keyshu-cert-btn {
    font-size: 18px;
    line-height: 1;
  }

  /* Dot active */
  .keyshu-cert-dot.is-active {
    transform: scale(1);
  }

  /* =========================================================
     KEYSHU - ĐIỀU HƯỚNG CHỨNG NHẬN GIỐNG ẢNH MẪU
     Chỉ thay phần nav / button / dots
  ========================================================= */

  /* Cụm điều hướng nằm giữa vòng tròn nền phía dưới */
  .keyshu-cert-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    position: absolute;
    bottom: -25%;
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
  }

  /* Nút trái/phải dạng tròn trắng */
  .keyshu-cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-primary) !important;
    background: var(--color-white) !important;
    border: 1px solid rgba(3, 176, 177, 0.12) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 20px rgba(35, 91, 101, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: all var(--transition-fast);
    cursor: pointer;
  }

  /* Icon nằm chính giữa nút */
  .keyshu-cert-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px;
    line-height: 1;
    color: inherit !important;
  }

  /* Hover nhẹ, không làm lệch vị trí */
  .keyshu-cert-btn:hover {
    color: var(--color-primary) !important;
    background: var(--color-white) !important;
    box-shadow: 0 12px 26px rgba(3, 176, 177, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
  }

  /* Cụm dots ở giữa */
  .keyshu-cert-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
  }

  /* Dot thường */
  .keyshu-cert-dot {
    width: 8px;
    min-width: 8px;
    height: 8px;
    min-height: 8px;
    margin: 0 !important;
    padding: 0 !important;
    background: #d8dedf !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    opacity: 1;
    transition: all var(--transition-fast);
    cursor: pointer;
  }

  /* Dot active màu chính */
  .keyshu-cert-dot.is-active {
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
    background: var(--color-primary) !important;
  }

  /* Hover dot */
  .keyshu-cert-dot:hover {
    background: rgba(3, 176, 177, 0.45) !important;
  }

  /* Không để Flatsome thêm viền xanh/đen khi click */
  .keyshu-cert-btn:focus,
.keyshu-cert-dot:focus {
    box-shadow: 0 8px 20px rgba(35, 91, 101, 0.10),
          inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    outline: none !important;
  }
}
/* =========================================================
   LÀM MỜ 2 ẢNH CUỐI ĐỂ KHÔNG ĐÈ TEXT BÊN PHẢI
   Ghi đè opacity inline do JS tạo ra
========================================================= */

/* Ảnh thứ 4 trong chồng giấy */
.keyshu-certificate-section .keyshu-cert-card[style*="opacity: 0.52"] {
  opacity: 0.12 !important;
  filter: blur(1.5px) brightness(1.08) !important;
}

/* Ảnh thứ 5 trong chồng giấy */
.keyshu-certificate-section .keyshu-cert-card[style*="opacity: 0.4"] {
  opacity: 0.05 !important;
  filter: blur(2.2px) brightness(1.12) !important;
}

/* =========================================================
   KEYSHU - SECTION ĐỐI TÁC
   Áp dụng cho HTML Flatsome hiện tại:
   <section class="section keyshu-partners">
========================================================= */

/* Biến cục này đã được gom vào ROOT VARIABLES ở đầu file. */

/* Section chính */
.keyshu-partners {
  width: 100%;
  padding: 120px 32px 100px !important;
  background: linear-gradient(180deg, var(--color-bg-soft-green) 0%, var(--color-bg-soft-blue) 100%) !important;
  position: relative;
  /* margin-top: -80px;
  border-radius: 100px 100px 0 0; */
  z-index: 7;
  overflow: hidden;
}

/* Xóa padding mặc định inline của Flatsome nếu có */
.keyshu-partners > .section-content {
  position: relative;
  z-index: 2;
}

/* Tiêu đề */
.keyshu-partners .partners-title {
  margin: 0 0 22px !important;
  color: var(--text-color);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

/* Container row của Flatsome */
.keyshu-partners .row {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: center !important;
}

/* Reset cột Flatsome để không bị width mặc định large-2 ảnh hưởng */
.keyshu-partners .row > .col {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

/* Card logo */
.keyshu-partners .col-inner {
  height: 86px;
  padding: 14px 22px !important;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid #e8eef0;
  box-shadow: 0 6px 18px rgba(36, 92, 101, 0.08);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

/* Hover giống section đối tác mẫu */
.keyshu-partners .col-inner:hover {
  transform: translateY(-4px);
  border-color: rgba(3, 176, 177, 0.3);
  box-shadow: 0 12px 26px rgba(36, 92, 101, 0.13);
}

/* Bọc ảnh của Flatsome */
.keyshu-partners .img,
.keyshu-partners .img-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  background: transparent !important;
}

/* Ảnh logo */
.keyshu-partners .img img {
  display: block;
  width: auto !important;
  max-width: 160px !important;
  height: 54px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* Xử lý riêng từng logo để nhìn đều nhau hơn */
.keyshu-partners .row > .col:nth-child(1) img {
  max-width: 165px !important;
}

.keyshu-partners .row > .col:nth-child(2) img {
  max-width: 120px !important;
}

.keyshu-partners .row > .col:nth-child(3) img {
  max-width: 120px !important;
}

.keyshu-partners .row > .col:nth-child(4) img {
  max-width: 120px !important;
}

.keyshu-partners .row > .col:nth-child(5) img {
  max-width: 165px !important;
}

.keyshu-partners .row > .col:nth-child(6) img {
  max-width: 165px !important;
}
/* =========================================================
   KEYSHU - KOL REVIEW SECTION
   Dùng cho HTML Flatsome hiện tại:
   <section class="section keyshu-kol-review">
========================================================= */

.keyshu-kol-review {
  --kol-main-color: var(--color-primary);
  --kol-text-color: var(--color-text);
  --kol-dark-color: var(--color-heading);

  position: relative;
  width: 100%;
  padding: 110px 0 90px !important;
  margin-top: -70px;
  border-radius: 90px 90px 0 0;
  background: linear-gradient(180deg, var(--color-bg-soft-blue) 0%, var(--color-white) 100%);
  overflow: hidden;
  z-index: 8;
}

/* Giữ nội dung nằm trên background */
.keyshu-kol-review .section-content {
  position: relative;
  z-index: 2;
}

/* Container chính */
.keyshu-kol-review > .section-content > .row,
.keyshu-kol-review .section-content > .row {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reset padding mặc định Flatsome */
.keyshu-kol-review .col {
  padding-bottom: 0 !important;
}

/* =========================================================
   TIÊU ĐỀ SECTION
========================================================= */

.keyshu-kol-review .partners-title {
  margin: 0 0 28px !important;
  color: var(--kol-text-color);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.keyshu-kol-review .partners-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--kol-main-color);
  transform: translateX(-50%);
}

/* =========================================================
   DESKTOP LAYOUT
   Sửa lỗi cột trái large-2 quá hẹp của Flatsome
========================================================= */

@media (min-width: 850px) {
  .keyshu-kol-review .keyshu-kol-text {
    flex-basis: 22% !important;
    max-width: 22% !important;
    padding-right: 16px !important;
  }

  .keyshu-kol-review .keyshu-kol-img {
    flex-basis: 78% !important;
    max-width: 78% !important;
    padding-left: 10px !important;
  }
}

/* =========================================================
   CỘT TRÁI - CARD ĐÁNH GIÁ
========================================================= */

.keyshu-kol-review .kol-summary-card {
  width: 100%;
  min-height: 334px;
  padding: 34px 22px 26px !important;
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid rgba(3, 176, 177, 0.22);
  box-shadow: 0 8px 22px rgba(3, 176, 177, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Flatsome tự sinh p/br trong HTML, cần reset */
.keyshu-kol-review .kol-summary-card p {
  margin: 0 !important;
}

.keyshu-kol-review .kol-summary-card br {
  display: none !important;
}

/* Hàng điểm + sao */
.keyshu-kol-review .kol-score-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 12px !important;
}

/* Điểm 4.9 /5 */
.keyshu-kol-review .kol-main-score {
  display: flex !important;
  align-items: baseline !important;
  flex-shrink: 0 !important;
  color: var(--kol-main-color) !important;
  white-space: nowrap !important;
}

.keyshu-kol-review .kol-main-score span {
  font-size: 40px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -1px;
}

.keyshu-kol-review .kol-main-score small {
  margin-left: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

/* Sao nằm ngang */
.keyshu-kol-review .kol-summary-stars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--color-rating) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.keyshu-kol-review .kol-summary-stars i {
  display: inline-flex !important;
  line-height: 1 !important;
}

/* Tổng đánh giá */
.keyshu-kol-review .kol-total-review {
  margin: 0 0 24px !important;
  color: #6c7f80 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

/* Nhóm thanh rating */
.keyshu-kol-review .kol-rating-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  width: 100% !important;
}

/* Từng dòng rating */
.keyshu-kol-review .kol-rating-line {
  display: grid !important;
  grid-template-columns: 52px minmax(80px, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.keyshu-kol-review .kol-rating-line span,
.keyshu-kol-review .kol-rating-line strong {
  color: #607474 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.keyshu-kol-review .kol-rating-line strong {
  display: block !important;
  text-align: right !important;
}

/* Thanh nền */
.keyshu-kol-review .rating-track {
  width: 100% !important;
  height: 6px !important;
  border-radius: var(--radius-pill) !important;
  background: #e5ecec !important;
  overflow: hidden !important;
}

/* Thanh màu */
.keyshu-kol-review .rating-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--kol-main-color) !important;
}

/* Nút xem tất cả */
.keyshu-kol-review .kol-summary-btn {
  width: 180px !important;
  height: 40px !important;
  margin: 26px auto 0 !important;
  border-radius: var(--radius-pill) !important;
  background: var(--kol-main-color) !important;
  color: var(--color-white) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(3, 176, 177, 0.24) !important;
  transition: all var(--transition-fast) !important;
}

.keyshu-kol-review .kol-summary-btn:hover {
  background: #02999a !important;
  color: var(--color-white) !important;
  transform: translateY(-2px);
}

/* =========================================================
   CỘT PHẢI - DANH SÁCH ẢNH KOL
========================================================= */

.keyshu-kol-review .keyshu-kol-img {
  position: relative;
}

/* Row chứa các ảnh KOL */
.keyshu-kol-review .keyshu-kol-img > .col-inner > .row {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 14px !important;
}

.keyshu-kol-review .keyshu-kol-img > .col-inner > .row::-webkit-scrollbar {
  display: none;
}

/* Mỗi item ảnh KOL - desktop hiển thị 4 ảnh */
.keyshu-kol-review .keyshu-kol-img > .col-inner > .row > .col {
  flex: 0 0 calc((100% - 54px) / 4) !important;
  max-width: calc((100% - 54px) / 4) !important;
  width: auto !important;
  padding: 0 !important;
  scroll-snap-align: start;
}

/* Box ảnh */
.keyshu-kol-review .box {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  border-radius: 18px;
  background: #eaf1f2;
  box-shadow: 0 10px 24px rgba(3, 176, 177, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.keyshu-kol-review .box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(3, 176, 177, 0.18);
}

/* Ảnh KOL full card */
.keyshu-kol-review .box-image {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}

.keyshu-kol-review .box-image > div {
  width: 100%;
  height: 100%;
}

.keyshu-kol-review .box-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.35s ease;
}

.keyshu-kol-review .box:hover .box-image img {
  transform: scale(1.04);
}

/* Lớp phủ đen phía dưới ảnh */
.keyshu-kol-review .box-image .shade,
.keyshu-kol-review .box-shade .shade {
  position: absolute;
  inset: 0;
  opacity: 1 !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.48) 32%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

/* Text tên KOL */
.keyshu-kol-review .box-text {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 18px !important;
  background: transparent !important;
  transform: none !important;
}

.keyshu-kol-review .box-text-inner {
  width: 100%;
}

.keyshu-kol-review .box-text h5 {
  margin: 0 !important;
  color: var(--color-white) !important;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  text-align: left !important;
  text-transform: uppercase;
}

/* =========================================================
   NÚT ĐIỀU HƯỚNG JS TỰ TẠO
========================================================= */

.keyshu-kol-review .keyshu-kol-nav {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(3, 176, 177, 0.15);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--kol-main-color);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(3, 176, 177, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: all var(--transition-fast);
}

.keyshu-kol-review .keyshu-kol-nav:hover {
  background: var(--kol-main-color);
  color: var(--color-white);
  border-color: var(--kol-main-color);
  transform: translateY(-50%) scale(1.06);
}

.keyshu-kol-review .keyshu-kol-prev {
  left: -20px;
}

.keyshu-kol-review .keyshu-kol-next {
  right: -20px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1199px) {
  .keyshu-kol-review {
    padding: 70px 22px 60px !important;
    margin-top: -50px;
    border-radius: 60px 60px 0 0;
  }

  .keyshu-kol-review .row {
    max-width: 100% !important;
  }

  .keyshu-kol-review .box {
    min-height: 300px;
  }

  .keyshu-kol-review .kol-main-score span {
    font-size: 48px !important;
  }

  .keyshu-kol-review .kol-main-score small {
    font-size: 20px !important;
  }

  .keyshu-kol-review .kol-summary-stars {
    font-size: 14px !important;
    gap: 5px !important;
  }
}

/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */
/* =========================================================
   RESPONSIVE - MOBILE/TABLET NHỎ
========================================================= */

@media (max-width: 849px) {
  .keyshu-kol-review {
    padding: 46px 16px 44px !important;
    margin-top: -30px;
    border-radius: 42px 42px 0 0;
  }

  .keyshu-kol-review .partners-title {
    font-size: 22px;
    margin-bottom: 22px !important;
  }

  .keyshu-kol-review .keyshu-kol-text,
  .keyshu-kol-review .keyshu-kol-img {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .keyshu-kol-review .kol-summary-card {
    max-width: 300px;
    min-height: auto;
    margin: 0 auto 24px !important;
    padding: 34px 26px 28px !important;
  }

  .keyshu-kol-review .kol-score-row {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  .keyshu-kol-review .kol-main-score span {
    font-size: 56px !important;
  }

  .keyshu-kol-review .kol-main-score small {
    font-size: 22px !important;
  }

  .keyshu-kol-review .kol-summary-stars {
    font-size: 16px !important;
  }

  .keyshu-kol-review .kol-total-review {
    text-align: left !important;
  }

  .keyshu-kol-review .kol-rating-line {
    grid-template-columns: 52px 1fr 38px !important;
  }

  .keyshu-kol-review .kol-summary-btn {
    width: 180px !important;
  }

  /* Mobile chuyển ảnh thành grid 2 cột */
  .keyshu-kol-review .keyshu-kol-img > .col-inner > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px !important;
    overflow: visible;
    padding: 0 !important;
  }

  .keyshu-kol-review .keyshu-kol-img > .col-inner > .row > .col {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .keyshu-kol-review .box {
    min-height: 360px;
  }

  .keyshu-kol-review .keyshu-kol-nav {
    display: none !important;
  }
}

/* =========================================================
   RESPONSIVE - MOBILE NHỎ
========================================================= */

@media (max-width: 549px) {
  .keyshu-kol-review {
    padding: 38px 12px 38px !important;
  }

  .keyshu-kol-review .partners-title {
    font-size: 21px;
  }

  .keyshu-kol-review .kol-summary-card {
    max-width: 300px;
  }

  .keyshu-kol-review .keyshu-kol-img > .col-inner > .row {
    grid-template-columns: 1fr;
  }

  .keyshu-kol-review .box {
    min-height: 420px;
  }

  .keyshu-kol-review .box-text h5 {
    font-size: 18px;
  }
}
/* =========================================================
   KEYSHU BLOG SECTION - FINAL RESPONSIVE
   Scope: .keyshu-blog
   Desktop:
   - Container: 1320px
   - Left featured: 760px x 560px
   - Gap: 40px
   - Right column: 520px
   - Small image desktop: 200px x 108px
   - 4 bài nhỏ cao bằng bài lớn bên trái
========================================================= */

.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-black: #000000;
  --ks-blog-font: "SVN-Gilroy", sans-serif;

  --ks-blog-container: 1320px;
  --ks-blog-left: 760px;
  --ks-blog-right: 520px;
  --ks-blog-gap: 40px;

  /* Desktop */
  --ks-blog-feature-height: 560px;
  --ks-blog-small-image-width: 200px;
  --ks-blog-small-image-height: 108px;
  --ks-blog-small-text-width: 302px;

  /* 4 * 108 + 3 * 42.666 = 560 */
  --ks-blog-small-gap: 42.666px;

  width: 100%;
  margin: 0 !important;
  padding: 0 0 60px !important;
  background: #ffffff !important;
  overflow: hidden;
  font-family: var(--ks-blog-font) !important;
}

.keyshu-blog *,
.keyshu-blog *::before,
.keyshu-blog *::after {
  box-sizing: border-box;
}

.keyshu-blog .section-bg {
  display: none !important;
}

.keyshu-blog .section-content {
  width: 100% !important;
  max-width: var(--ks-blog-container) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.keyshu-blog .section-content > .row {
  width: 100% !important;
  max-width: var(--ks-blog-container) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.keyshu-blog .section-content > .row > .col,
.keyshu-blog .col,
.keyshu-blog .col-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   TITLE
========================================================= */

.keyshu-blog .keyshu-blog-text {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.keyshu-blog .keyshu-blog-text .col-inner {
  text-align: center !important;
}

.keyshu-blog .blog-title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--ks-blog-heading) !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.keyshu-blog .keyshu-blog-text p {
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #587072 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* =========================================================
   TABS
========================================================= */

.keyshu-blog .keyshu-blog-tabs {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  padding: 0 !important;
}

.keyshu-blog .tabbed-content {
  width: 100% !important;
}

.keyshu-blog .nav {
  width: 100% !important;
  max-width: var(--ks-blog-container) !important;
  margin: 20px auto 40px !important;
  padding: 0 0 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 34px;
  border-bottom: 1px solid var(--ks-blog-border);
}

.keyshu-blog .nav > li {
  margin: 0 !important;
  padding: 0 !important;
}

.keyshu-blog .nav > li > a {
  position: relative;
  padding: 0 0 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #828b8d !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !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 {
  font-weight: 700 !important;
}

.keyshu-blog .nav > li.active > a::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 2px;
  display: block !important;
  background: var(--ks-blog-heading);
  border-radius: 99px;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.keyshu-blog .tab-panels,
.keyshu-blog .panel {
  padding: 0 !important;
}

.keyshu-blog .panel.active > .row {
  width: var(--ks-blog-container) !important;
  max-width: var(--ks-blog-container) !important;
  height: var(--ks-blog-feature-height) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: var(--ks-blog-left) var(--ks-blog-right) !important;
  column-gap: var(--ks-blog-gap) !important;
  row-gap: 0 !important;
  align-items: stretch !important;
}

.keyshu-blog .panel.active > .row::before,
.keyshu-blog .panel.active > .row::after {
  display: none !important;
}

.keyshu-blog .panel.active > .row > .col {
  width: 100% !important;
  max-width: 100% !important;
  height: var(--ks-blog-feature-height) !important;
  flex: none !important;
  flex-basis: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.keyshu-blog .panel.active > .row > .col > .col-inner {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

.keyshu-blog .panel.active > .row > .col > .col-inner > .row {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.keyshu-blog .post-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  flex-basis: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.keyshu-blog .post-item .col-inner {
  padding: 0 !important;
}

.keyshu-blog .box-blog-post {
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.keyshu-blog .box-image,
.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;
}

/* =========================================================
   LEFT FEATURED POST
========================================================= */

.keyshu-blog .panel.active > .row > .col:first-child {
  grid-column: 1 !important;
}

.keyshu-blog .panel.active > .row > .col:first-child > .col-inner > .row {
  display: block !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .post-item,
.keyshu-blog .panel.active > .row > .col:first-child .post-item .col-inner {
  height: 100% !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-blog-post {
  position: relative !important;
  width: 100% !important;
  height: var(--ks-blog-feature-height) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: var(--ks-blog-black) !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .image-cover {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

.keyshu-blog .panel.active > .row > .col:first-child 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: inherit !important;
  transform: scale(1) !important;
  transition: transform 0.55s ease !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-blog-post:hover img {
  transform: scale(1.045) !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-blog-post::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.12) 34%,
      rgba(0, 0, 0, 0.45) 68%,
      rgba(0, 0, 0, 0.72) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.22) 44%,
      rgba(0, 0, 0, 0.08) 100%
    ) !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-text {
  position: absolute !important;
  left: 42px !important;
  right: 42px !important;
  bottom: 84px !important;
  z-index: 4 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-text-inner {
  width: 100% !important;
  max-width: 660px !important;
  text-align: left !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .cat-label {
  width: auto !important;
  height: 27px !important;
  margin: 0 0 14px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #17383b !important;
  background: var(--ks-blog-white) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .post-title {
  display: -webkit-box !important;
  max-width: 650px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--ks-blog-white) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.5px !important;
  text-align: left !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .post-title a {
  display: block !important;
  color: var(--ks-blog-white) !important;
  text-decoration: none !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .from_the_blog_excerpt {
  display: -webkit-box !important;
  max-width: 650px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  text-align: left !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .blog-post-inner::after {
  content: "ĐỌC NGAY  →" !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ks-blog-white) !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  transition: transform 0.25s ease !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .box-blog-post:hover .blog-post-inner::after {
  transform: translateX(4px) !important;
}

/* Date bài lớn */
.keyshu-blog .panel.active > .row > .col:first-child .badge {
  position: absolute !important;
  left: 50px !important;
  right: auto !important;
  top: auto !important;
  bottom: 55px !important;
  z-index: 4 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ks-blog-white) !important;
  text-align: left !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .badge-outline,
.keyshu-blog .panel.active > .row > .col:first-child .badge-outline .badge-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .badge-inner {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .badge-inner::before {
  content: "\f133" !important;
  display: inline-block !important;
  margin-right: 6px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .post-date-day,
.keyshu-blog .panel.active > .row > .col:first-child .post-date-month {
  display: inline !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .post-date-day::after {
  content: "/" !important;
}

.keyshu-blog .panel.active > .row > .col:first-child .badge br {
  display: none !important;
}

/* =========================================================
   RIGHT 4 SMALL POSTS
========================================================= */

.keyshu-blog .panel.active > .row > .col:last-child {
  grid-column: 2 !important;
}

.keyshu-blog .panel.active > .row > .col:last-child > .col-inner > .row {
  height: var(--ks-blog-feature-height) !important;
  display: grid !important;
  grid-template-rows: repeat(4, var(--ks-blog-small-image-height)) !important;
  row-gap: var(--ks-blog-small-gap) !important;
  overflow: visible !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-item {
  width: 100% !important;
  height: var(--ks-blog-small-image-height) !important;
  min-height: var(--ks-blog-small-image-height) !important;
  max-height: var(--ks-blog-small-image-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-item .col-inner {
  height: 100% !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .box-blog-post {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--ks-blog-small-image-width) var(--ks-blog-small-text-width) !important;
  grid-template-rows: 88px 20px !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  align-content: start !important;
  align-items: start !important;
  width: var(--ks-blog-right) !important;
  max-width: var(--ks-blog-right) !important;
  height: var(--ks-blog-small-image-height) !important;
  min-height: var(--ks-blog-small-image-height) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .box-image {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: var(--ks-blog-small-image-width) !important;
  height: var(--ks-blog-small-image-height) !important;
  min-width: var(--ks-blog-small-image-width) !important;
  max-width: var(--ks-blog-small-image-width) !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f5f7f7 !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .image-cover {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

.keyshu-blog .panel.active > .row > .col:last-child img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  transition: transform 0.4s ease !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .box-blog-post:hover img {
  transform: scale(1.06) !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .box-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: var(--ks-blog-small-text-width) !important;
  max-width: var(--ks-blog-small-text-width) !important;
  min-width: 0 !important;
  height: 88px !important;
  max-height: 88px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .box-text-inner {
  width: var(--ks-blog-small-text-width) !important;
  max-width: var(--ks-blog-small-text-width) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .cat-label::before,
.keyshu-blog .panel.active > .row > .col:last-child .cat-label::after {
  display: none !important;
  content: none !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .cat-label {
  order: 1 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  display: inline-block !important;
  color: var(--ks-blog-primary) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-size: 8.5px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-title {
  order: 2 !important;
  width: var(--ks-blog-small-text-width) !important;
  max-width: var(--ks-blog-small-text-width) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  display: block !important;
  color: var(--ks-blog-heading) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-title a {
  display: block !important;
  width: var(--ks-blog-small-text-width) !important;
  max-width: var(--ks-blog-small-text-width) !important;
  color: var(--ks-blog-heading) !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-title a:hover {
  color: var(--ks-blog-primary) !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .from_the_blog_excerpt {
  order: 3 !important;
  width: var(--ks-blog-small-text-width) !important;
  max-width: var(--ks-blog-small-text-width) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  color: var(--ks-blog-text) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Date bài nhỏ */
.keyshu-blog .panel.active > .row > .col:last-child .badge,
.keyshu-blog .panel.active > .row > .col:last-child .badge.absolute,
.keyshu-blog .panel.active > .row > .col:last-child .post-date {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: static !important;
  justify-self: start !important;
  align-self: end !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ks-blog-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .badge-outline,
.keyshu-blog .panel.active > .row > .col:last-child .badge-outline .badge-inner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .badge-inner {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  color: var(--ks-blog-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-date-day,
.keyshu-blog .panel.active > .row > .col:last-child .post-date-month {
  display: inline !important;
  color: var(--ks-blog-muted) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-transform: none !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .post-date-day::after {
  content: "/" !important;
}

.keyshu-blog .panel.active > .row > .col:last-child .badge br {
  display: none !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;
}

/* =========================================================
   BUTTON
========================================================= */

.keyshu-blog .keyshu-blog-tabs .button.primary {
  min-width: 222px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 50px auto 0 !important;
  padding: 0 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ks-blog-white) !important;
  background: var(--ks-blog-primary) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.keyshu-blog .keyshu-blog-tabs .button.primary span {
  color: var(--ks-blog-white) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.keyshu-blog .keyshu-blog-tabs .button.primary:hover {
  color: var(--ks-blog-white) !important;
  background: var(--ks-blog-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(3, 176, 177, 0.25) !important;
}

/* =========================================================
   RESPONSIVE - BELOW 1320PX
========================================================= */

@media (max-width: 1320px) {
  .keyshu-blog {
    --ks-blog-feature-height: 540px;
    --ks-blog-small-image-width: 180px;
    --ks-blog-small-image-height: 100px;
    --ks-blog-small-text-width: auto;

    /* 4*100 + 3*46.666 = 540 */
    --ks-blog-small-gap: 46.666px;

    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .keyshu-blog .section-content,
  .keyshu-blog .section-content > .row,
  .keyshu-blog .nav {
    max-width: 100% !important;
  }

  .keyshu-blog .panel.active > .row {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--ks-blog-feature-height) !important;
    grid-template-columns: minmax(0, 58%) minmax(0, 39%) !important;
    column-gap: 3% !important;
  }

  .keyshu-blog .panel.active > .row > .col {
    height: var(--ks-blog-feature-height) !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .box-blog-post {
    height: var(--ks-blog-feature-height) !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child > .col-inner > .row {
    height: var(--ks-blog-feature-height) !important;
    grid-template-rows: repeat(4, var(--ks-blog-small-image-height)) !important;
    row-gap: var(--ks-blog-small-gap) !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .box-blog-post {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--ks-blog-small-image-height) !important;
    grid-template-columns: var(--ks-blog-small-image-width) minmax(0, 1fr) !important;
    grid-template-rows: 82px 18px !important;
    column-gap: 16px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .box-image {
    width: var(--ks-blog-small-image-width) !important;
    height: var(--ks-blog-small-image-height) !important;
    min-width: var(--ks-blog-small-image-width) !important;
    max-width: var(--ks-blog-small-image-width) !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .box-text {
    height: 82px !important;
    max-height: 82px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .box-text,
  .keyshu-blog .panel.active > .row > .col:last-child .box-text-inner,
  .keyshu-blog .panel.active > .row > .col:last-child .post-title,
  .keyshu-blog .panel.active > .row > .col:last-child .post-title a,
  .keyshu-blog .panel.active > .row > .col:last-child .from_the_blog_excerpt {
    width: 100% !important;
    max-width: 100% !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .post-title {
    font-size: 14px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .from_the_blog_excerpt {
    font-size: 11.5px !important;
  }
}

/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1024px) {
  .keyshu-blog {
    padding: 56px 18px !important;
  }

  .keyshu-blog .nav {
    justify-content: flex-start;
    gap: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .keyshu-blog .nav::-webkit-scrollbar {
    display: none;
  }

  .keyshu-blog .panel.active > .row {
    height: auto !important;
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;
  }

  .keyshu-blog .panel.active > .row > .col {
    grid-column: 1 !important;
    height: auto !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .box-blog-post {
    height: 500px !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .box-text {
    left: 34px !important;
    right: 34px !important;
    bottom: 82px !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .badge {
    left: 34px !important;
    bottom: 36px !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .post-title {
    max-width: 620px !important;
    font-size: 29px !important;
  }

  .keyshu-blog .panel.active > .row > .col:first-child .from_the_blog_excerpt {
    max-width: 620px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child > .col-inner > .row {
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .post-item {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 22px !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 .box-blog-post {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 110px !important;
    grid-template-columns: 200px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .box-image {
    width: 200px !important;
    height: 110px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .box-text {
    height: auto !important;
    max-height: none !important;
  }

  .keyshu-blog .panel.active > .row > .col:last-child .badge,
  .keyshu-blog .panel.active > .row > .col:last-child .badge.absolute,
  .keyshu-blog .panel.active > .row > .col:last-child .post-date {
    margin-top: 6px !important;
  }
}
/* =========================================================
   KEYSHU - GIỚI HẠN TÊN SẢN PHẨM 2 DÒNG
   WooCommerce / Flatsome Product Loop
========================================================= */

.product-small .box-text-products .title-wrapper,
.product-small .box-text-products .product-title,
.product-small .box-text-products .woocommerce-loop-product__title {
  width: 100%;
  margin-bottom: 6px !important;
}

.product-small .box-text-products .product-title a,
.product-small .box-text-products .woocommerce-loop-product__title a,
.product-small .box-text-products .woocommerce-LoopProduct-link {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  min-height: calc(1.35em * 2);
  max-height: calc(1.35em * 2);

  color: inherit;
  font-size: inherit;
  line-height: 1.35 !important;
  font-weight: inherit;

  word-break: break-word;
}