/* ==========================================================
   SỬA LỖI HEADER: PHÂN BIỆT TRANG CHỦ VÀ TRANG CON
   ========================================================== */

/* ---------------------------------------------------
   1. MẶC ĐỊNH CHO CÁC TRANG CON (Trang Shop, Sản phẩm...) 
   --------------------------------------------------- */
.custom-rokan-header {
    position: relative !important;
    /* Đẩy thanh Breadcrumb màu cam xuống dưới, không bị đè */
    background: #ffffff !important;
    /* Nền trắng */
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important;
    z-index: 999 !important;
    height: 90px;
}

/* Flexbox giữ cho các phần tử nằm ngang */
.custom-flex-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100%;
    padding: 0 40px !important;
}

/* TRANG CON: Đổi màu chữ, logo và icon thành ĐEN để nhìn rõ trên nền trắng */
.custom-rokan-header .rokan-text-logo {
    color: #333333 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    font-family: var(--font-family-title) !important;
    /* Đã đồng bộ font title */
}

.custom-rokan-header .rokan-menu li a,
.custom-rokan-header .rokan-actions .material-icons {
    color: #333333 !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------
   2. RIÊNG TRANG CHỦ (Overlay lên Slider)
   --------------------------------------------------- */
/* WP tự động có class .home ở trang chủ, ta dùng nó để làm Header trong suốt */
.home .custom-rokan-header {
    position: absolute !important;
    background: transparent !important;
    border-bottom: none !important;
}

/* TRANG CHỦ: Màu chữ, logo và icon đổi lại thành TRẮNG */
.home .custom-rokan-header .rokan-text-logo,
.home .custom-rokan-header .rokan-menu li a,
.home .custom-rokan-header .rokan-actions .material-icons {
    color: #ffffff !important;
}


/* ---------------------------------------------------
   3. CÁC ĐỊNH DẠNG CHUNG KHÔNG ĐỔI
   --------------------------------------------------- */
.rokan-main-nav {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end !important;
    margin-right: 40px;
}

.rokan-menu {
    display: flex !important;
    gap: 35px !important;
    margin: 0 !important;
}

.rokan-menu li a {
    font-size: 16px !important;
}

.rokan-menu li a::after {
    display: none !important;
}

.rokan-menu li.menu-item-has-children>a::after {
    content: 'expand_more';
    font-family: 'Material Icons';
    font-size: 20px;
    margin-left: 2px;
    display: inline-block;
}

.rokan-actions .header-actions-list {
    display: flex !important;
    gap: 25px !important;
    align-items: center !important;
    margin: 0 !important;
}

.rokan-actions .material-icons {
    font-size: 26px !important;
}

.rokan-actions .position-relative {
    position: relative !important;
    display: flex !important;
    align-items: center;
}

/* Nút Badge số lượng giỏ hàng màu đỏ */
.rokan-badge {
    position: absolute !important;
    top: -5px !important;
    right: -10px !important;
    background-color: #df4b4b !important;
    color: #fff !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------
   4. RESPONSIVE MOBILE
   --------------------------------------------------- */
@media (min-width: 993px) {
    .rokan-mobile-btn {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .desktop-only {
        display: none !important;
    }

    .rokan-mobile-btn {
        display: block !important;
        border: none;
        background: transparent;
        z-index: 1000;
    }

    /* Trang con Mobile: Gạch hamburger màu đen */
    .custom-rokan-header .hamburger-inner,
    .custom-rokan-header .hamburger-inner::before,
    .custom-rokan-header .hamburger-inner::after {
        background-color: #333 !important;
    }

    /* Trang chủ Mobile: Gạch hamburger màu trắng, nền trong suốt hơi tối */
    .home .custom-rokan-header .hamburger-inner,
    .home .custom-rokan-header .hamburger-inner::before,
    .home .custom-rokan-header .hamburger-inner::after {
        background-color: #fff !important;
    }

    .home .custom-rokan-header {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    .custom-flex-header {
        padding: 0 15px !important;
    }
}

/* --- 2. HERO SLIDER FULL MÀN HÌNH --- */
.custom-rokan-slider {
    padding: 0 !important;
    margin: 0 !important;
}

.rokan-slide-item {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
}

.rokan-slide-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
}

.rokan-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: 2 !important;
}

.rokan-slide-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    padding-left: 8% !important;
    padding-bottom: 8% !important;
}

.rokan-content-inner {
    max-width: 600px;
}

.rokan-subtitle {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
}

.rokan-title {
    color: #fff !important;
    font-family: var(--font-family-title) !important;
    /* Đã đồng bộ font title */
    font-size: clamp(3rem, 5vw, 4.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 30px !important;
    font-weight: bold !important;
}

.rokan-btn {
    display: inline-block !important;
    padding: 12px 30px !important;
    border: 1px solid #fff !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-family: var(--font-family-primary) !important;
    /* Đã đồng bộ font thường */
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.rokan-btn:hover {
    background: #fff !important;
    color: #000 !important;
}

.rokan-arrow {
    background: #fff !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
}

.rokan-arrow::after {
    display: none !important;
}

.swiper-button-prev.rokan-arrow {
    left: 30px !important;
}

.swiper-button-next.rokan-arrow {
    right: 30px !important;
}

/* ==========================================================
   3. RESPONSIVE MOBILE
   ========================================================== */
@media (max-width: 992px) {

    /* Ẩn Menu ngang Desktop */
    .desktop-only {
        display: none !important;
    }

    /* Hiện Nút Hamburger Mobile */
    .rokan-mobile-btn {
        display: block !important;
        border: none;
        background: transparent;
        z-index: 1000;
    }

    /* Đổi màu 3 gạch Hamburger thành màu trắng */
    .custom-rokan-header .hamburger-inner,
    .custom-rokan-header .hamburger-inner::before,
    .custom-rokan-header .hamburger-inner::after {
        background-color: #fff !important;
    }

    /* Làm nền Header hơi tối để thấy rõ logo và icon */
    .custom-rokan-header {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    .custom-flex-header {
        padding: 0 15px !important;
    }

    .rokan-slide-content {
        padding-left: 20px !important;
        padding-bottom: 40px !important;
    }

    .rokan-arrow {
        display: none !important;
    }

    /* Điện thoại vuốt qua lại, không cần nút */
}

/* ==========================================================
   SHOP BY CATEGORY (4 COLUMNS - IMAGE CARD WITH PILL LABEL)
   ========================================================== */

/* 1. Reset Margin/Padding section (Tùy chỉnh khoảng cách trên dưới) */
.mimosa-category-section {
    padding: 60px 0;
}

/* (Tuỳ chọn) CSS cho Tiêu đề nếu có hiển thị */
.mimosa-section-header {
    margin-bottom: 40px;
}

.mimosa-section-header .mimosa-heading {
    font-family: var(--font-family-title);
    /* Đã đồng bộ font title */
    font-size: 32px;
    font-weight: bold;
    color: #111;
}

.mimosa-section-header .mimosa-subheading {
    font-family: var(--font-family-primary);
    color: #666;
    font-size: 15px;
}

/* =======================================
   2. CẤU TRÚC GRID 4 CỘT
   ======================================= */
.mimosa-cat-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Chia 4 cột bằng nhau */
    gap: 25px;
    /* Khoảng cách giữa các cột giống hình */
}

/* =======================================
   3. STYLE CHO TỪNG CARD SẢN PHẨM
   ======================================= */
.mimosa-cat-card {
    position: relative;
    display: block;
    border-radius: 12px;
    /* Bo góc mượt mà cho toàn bộ card */
    overflow: hidden;
    /* Ép hình ảnh không bị tràn ra khỏi viền bo góc */
    text-decoration: none !important;
}

/* Khung bọc hình ảnh (Giữ tỷ lệ ảnh chữ nhật đứng) */
.mimosa-cat-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4;
    /* Ép tỷ lệ ảnh là 3 rộng : 4 cao (Portrait) */
    background-color: #f5f5f5;
    /* Màu nền chờ khi ảnh load */
    display: block;
}

/* Hình ảnh cover đầy đủ */
.mimosa-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Đảm bảo ảnh không bị méo */
    transition: transform 0.5s ease;
    /* Hiệu ứng zoom khi di chuột */
}

/* Hiệu ứng Hover: Zoom nhẹ hình ảnh */
.mimosa-cat-card:hover .mimosa-cat-img {
    transform: scale(1.05);
}

/* =======================================
   4. NHÃN TÊN DANH MỤC (PILL SHAPE GÓC DƯỚI)
   ======================================= */
/* Đưa thẻ bọc chữ nổi lên trên hình ảnh */
.mimosa-cat-info {
    position: absolute;
    bottom: 20px;
    /* Cách đáy 20px */
    left: 20px;
    /* Căn lề trái 20px */
    right: 20px;
    /* Căn lề phải 20px */
    z-index: 2;
}

/* Khung trắng trong suốt bo tròn (Pill) chứa text */
.mimosa-cat-name {
    background-color: rgba(255, 255, 255, 0.85);
    /* Nền trắng đục 85% */
    backdrop-filter: blur(4px);
    /* (Tuỳ chọn) Hiệu ứng kính mờ - Glassmorphism */
    color: #111111;
    font-family: var(--font-family-title);
    /* Đã đồng bộ font title */
    font-size: 16px;
    font-weight: 600;
    padding: 12px 10px;
    margin: 0;
    border-radius: 50px;
    /* Bo tròn hoàn toàn 2 đầu (Hình con nhộng) */
    text-align: center;
    transition: all 0.3s ease;
}

/* Hiệu ứng Hover: Chữ chuyển màu cam hoặc nền đặc lại */
.mimosa-cat-card:hover .mimosa-cat-name {
    background-color: rgba(255, 255, 255, 1);
}

/* =======================================
   5. RESPONSIVE ĐIỆN THOẠI & TABLET
   ======================================= */
/* Tablet: Thu xuống 2 cột */
@media (max-width: 992px) {
    .mimosa-cat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile: Giữ 2 cột nhưng thu nhỏ khoảng cách và chữ */
@media (max-width: 576px) {
    .mimosa-cat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        /* Trên mobile vẫn để 2 cột dọc cho đẹp */
        gap: 12px;
    }

    .mimosa-cat-info {
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

    .mimosa-cat-name {
        font-size: 13px;
        /* Thu nhỏ font */
        padding: 8px 5px;
    }
}

/* ==========================================================
   SERVICE FEATURES SECTION (4 COLUMNS - ICON LEFT, TEXT RIGHT)
   ========================================================== */

/* 1. Khoảng cách tổng thể của Section */
.milano-features-section {
    padding: 50px 0;
    /* Khoảng cách trên dưới */
    background-color: #ffffff;
    /* Hoặc có thể đổi thành transparent nếu nền có màu sẵn */
    border: none !important;
    /* Đảm bảo tuyệt đối không có viền theo yêu cầu */
}

/* 2. Cấu trúc Grid 4 cột */
.milano-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Chia đều 4 cột */
    gap: 30px;
    /* Khoảng cách giữa các cột */
    align-items: center;
}

/* 3. Cấu trúc từng Item (Flexbox: Icon trái, Text phải) */
.milano-feature-item {
    display: flex;
    align-items: center;
    /* Căn giữa theo chiều dọc */
    justify-content: center;
    /* Căn giữa toàn bộ cụm trong cột */
    gap: 15px;
    /* Khoảng cách giữa Icon và Text */
    padding: 10px;
    transition: transform 0.3s ease;
}

/* Hiệu ứng nhích nhẹ lên khi hover */
.milano-feature-item:hover {
    transform: translateY(-5px);
}

/* 4. Style cho Icon (Màu vàng - Yellow) */
.milano-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.milano-feature-icon .material-icons {
    font-size: 38px;
    /* Kích thước Icon */
    color: #e5b945;
    /* Màu Vàng (Yellow/Gold) tinh tế theo yêu cầu */
    transition: transform 0.3s ease;
}

/* Hiệu ứng phóng to nhẹ Icon khi hover vào Item */
.milano-feature-item:hover .milano-feature-icon .material-icons {
    transform: scale(1.1);
}

/* 5. Style cho Text bên phải */
.milano-feature-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Chữ luôn canh trái */
}

.milano-feature-title {
    font-family: var(--font-family-title, sans-serif);
    /* Đã đồng bộ font title */
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    /* Màu chữ tiêu đề (Đen đậm để dễ đọc) */
    text-transform: uppercase;
    /* Viết hoa toàn bộ */
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
    /* Khoảng cách nhỏ với dòng mô tả */
}

.milano-feature-desc {
    font-family: var(--font-family-primary, sans-serif);
    font-size: 13px;
    color: #777777;
    /* Màu xám nhạt cho mô tả */
    margin: 0;
    line-height: 1.4;
}

/* =======================================
   6. RESPONSIVE ĐIỆN THOẠI & TABLET
   ======================================= */

/* Tablet (Màn hình dưới 992px): Thu về 2 cột */
@media (max-width: 992px) {
    .milano-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .milano-feature-item {
        justify-content: flex-start;
        /* Đẩy sát về bên trái cho gọn */
    }
}

/* Mobile (Màn hình dưới 576px): Thu về 1 cột hoặc giữ 2 cột nhỏ */
@media (max-width: 576px) {
    .milano-features-grid {
        grid-template-columns: 1fr;
        /* Tràn 1 cột dọc trên điện thoại */
        gap: 20px;
    }

    .milano-feature-item {
        justify-content: center;
        /* Trở lại canh giữa trên mobile */
    }

    /* Thu nhỏ chữ và icon xíu trên mobile */
    .milano-feature-icon .material-icons {
        font-size: 32px;
    }

    .milano-feature-title {
        font-size: 14px;
    }

    .milano-feature-desc {
        font-size: 12px;
    }
}

/* ==========================================================
   LATEST ARRIVALS / BESTSELLERS SECTION (CHÍNH XÁC NHẤT)
   ========================================================== */

/* 1. Header Section (Our Bestsellers) */
.mimosa-latest-arrivals-section {
    padding: 60px 0;
}

.mimosa-section-header {
    margin-bottom: 40px;
    position: relative;
    text-align: center;
}

.mimosa-heading {
    font-family: var(--font-family-title);
    /* Đã đồng bộ font title */
    font-size: 32px;
    font-weight: 700;
    color: #111111;
    display: inline-block;
    background: #fff;
    padding: 0 25px;
    position: relative;
    z-index: 2;
    margin: 0;
}

/* 2 đường kẻ ngang 2 bên tiêu đề */
.mimosa-section-header::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    max-width: 80%;
    height: 1px;
    background-color: #e5e5e5;
    z-index: 1;
}

.mimosa-subheading {
    display: none;
}

/* Ẩn sub-heading theo hình */

/* =======================================
   2. KHUNG HÌNH ẢNH SẢN PHẨM & BADGE
   ======================================= */
.mimosa-product-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mimosa-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    /* Ép khung hình dọc */
    background-color: #f4f4f4;
    /* Nền xám nhạt */
    border-radius: 8px;
    /* Bo góc */
    overflow: hidden;
}

.mimosa-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mimosa-img-wrapper:hover .product-img {
    transform: scale(1.05);
    /* Zoom ảnh khi hover */
}

/* Badge (Pre-order / -10%) */
.mimosa-badge-sale {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #d9534f;
    /* Đỏ (cho Sale) */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =======================================
   3. CỤM NÚT ACTION (QUICK VIEW + ADD TO CART)
   ======================================= */
.mimosa-floating-icons {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 45px);
    /* Kéo sang trái một nửa cụm */
    transform: translateY(20px);
    opacity: 0;
    z-index: 15;
    background: #ffffff;
    border-radius: 4px 0 0 4px;
    /* Bo nửa góc trái */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.mimosa-atc-wrap {
    position: absolute;
    bottom: 20px;
    left: 50%;
    /* Nằm bên phải */
    transform: translateY(20px);
    opacity: 0;
    z-index: 15;
    background: #ffffff;
    border-radius: 0 4px 4px 0;
    /* Bo nửa góc phải */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left: 1px solid #f0f0f0;
    /* Vạch kẻ giữa 2 nút */
    transition: all 0.3s ease;
}

/* Hiệu ứng trượt lên khi hover vào ảnh */
.mimosa-img-wrapper:hover .mimosa-floating-icons,
.mimosa-img-wrapper:hover .mimosa-atc-wrap {
    transform: translateY(0);
    opacity: 1;
}

/* Kích thước chung của 2 nút */
.mimosa-icon-btn,
.mimosa-atc-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
}

.mimosa-icon-btn .material-icons {
    font-size: 20px;
    color: #333333;
    transition: color 0.2s;
}

/* BIẾN CHỮ "ADD TO CART" THÀNH ICON (Giữ nguyên chức năng click) */
.mimosa-atc-btn {
    color: transparent !important;
    /* Làm tàng hình chữ "Add to cart" */
    position: relative;
    overflow: hidden;
}

/* Vẽ Icon chiếc túi xách đè lên */
.mimosa-atc-btn::after {
    content: 'local_mall';
    /* Tên icon giỏ hàng trong thư viện Material */
    font-family: 'Material Icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #333333;
    /* Hiện icon màu đen */
    transition: color 0.2s;
}

/* Đổi màu đỏ khi hover vào nút */
.mimosa-icon-btn:hover .material-icons,
.mimosa-atc-btn:hover::after {
    color: #d9534f;
}


/* =======================================
   4. THÔNG TIN SẢN PHẨM (NẰM DƯỚI, CĂN TRÁI)
   ======================================= */
.mimosa-info {
    text-align: left !important;
    /* Ép căn trái hoàn toàn */
}

/* Ẩn danh mục và sao đánh giá (Vì hình ảnh không có) */
.mimosa-meta-row {
    display: none !important;
}

.mimosa-name {
    margin: 0 0 5px 0;
}

.mimosa-name a {
    font-family: var(--font-family-title);
    /* Đã đồng bộ font title */
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Nếu tên quá dài sẽ hiện dấu 3 chấm */
    transition: color 0.2s;
}

.mimosa-name a:hover {
    color: #d9534f;
}

/* Hiển thị Giá */
.mimosa-price {
    font-family: var(--font-family-primary);
    /* Đã đồng bộ font thường */
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}

/* Giá Sale màu đỏ */
.mimosa-price ins {
    color: #d9534f;
    text-decoration: none;
    margin-right: 6px;
}

/* Giá cũ gạch ngang */
.mimosa-price del {
    color: #999999;
    font-weight: 400;
    font-size: 13px;
}


/* =======================================
   5. NÚT ĐIỀU HƯỚNG SLIDER (MŨI TÊN TRÒN)
   ======================================= */
.mimosa-products-swiper {
    position: relative;
    padding-bottom: 20px;
}

.mimosa-products-swiper .swiper-button-next,
.mimosa-products-swiper .swiper-button-prev {
    background-color: #ffffff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    color: #777 !important;
    margin-top: -60px;
    /* Căn vào giữa vùng ảnh */
}

/* Đổi icon mũi tên mỏng */
.mimosa-products-swiper .swiper-button-next::after,
.mimosa-products-swiper .swiper-button-prev::after {
    font-size: 14px !important;
    font-weight: bold;
}

.mimosa-products-swiper .swiper-button-next:hover,
.mimosa-products-swiper .swiper-button-prev:hover {
    color: #111 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================
   OUR BESTSELLING SECTION (TABS & PRODUCT GRID)
   ========================================================== */

.mimosa-bestselling-section {
    padding: 60px 0;
    background-color: #ffffff;
    /* Nền trắng sạch sẽ */
}

/* Ẩn Sub-heading (Giống section trước để đồng bộ thiết kế Minimal) */
.mimosa-bestselling-section .mimosa-subheading {
    display: none;
}

/* =======================================
   A. GIAO DIỆN THANH TABS NAVIGATION
   ======================================= */
.mimosa-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Rớt dòng nếu màn hình nhỏ */
    gap: 35px;
    /* Khoảng cách giữa các chữ */
    margin-top: 30px;
    margin-bottom: 40px;
}

.mimosa-tab-btn {
    font-family: var(--font-family-primary);
    /* Đã đồng bộ font thường */
    font-size: 15px;
    font-weight: 600;
    color: #888888;
    /* Chữ xám mờ khi chưa chọn */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Hiệu ứng gạch chân chạy ra khi Hover hoặc Active */
.mimosa-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #111111;
    transition: width 0.3s ease;
}

.mimosa-tab-btn:hover,
.mimosa-tab-btn.active {
    color: #111111;
    /* Đổi màu đen đậm khi được chọn */
}

.mimosa-tab-btn.active::after,
.mimosa-tab-btn:hover::after {
    width: 100%;
    /* Kéo dài đường gạch chân */
}

/* =======================================
   B. LOGIC ẨN/HIỆN NỘI DUNG TABS
   ======================================= */
.mimosa-product-group {
    display: none;
    /* Ẩn toàn bộ các khối sản phẩm */
    animation: fadeInTab 0.5s ease forwards;
    /* Hiệu ứng mờ dần khi chuyển tab */
}

/* Chỉ hiển thị khối sản phẩm nào có class 'active' */
.mimosa-product-group.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================================
   C. BADGE SALE HÌNH TRÒN ĐEN
   ======================================= */
/* Trong HTML này dùng class .mimosa-badge-sale-circle thay vì hình chữ nhật */
.mimosa-badge-sale-circle {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #111111;
    /* Màu đen sang trọng */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Bo tròn 100% thành hình tròn */
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive cho Tabs */
@media (max-width: 576px) {
    .mimosa-tabs-nav {
        gap: 15px;
    }

    .mimosa-tab-btn {
        font-size: 13px;
    }
}

/* ==========================================================
   BLOG POSTS SECTION (MIMOSA STYLE)
   ========================================================== */

.mimosa-blog-section {
    padding: 60px 0;
    background-color: #ffffff;
}

/* 1. Header (Kế thừa từ CSS cũ, đảm bảo hiển thị đúng) */
.mimosa-blog-section .mimosa-section-header {
    margin-bottom: 40px;
    position: relative;
    text-align: center;
}

/* =======================================
   2. KHUNG BÀI VIẾT (BLOG CARD)
   ======================================= */
.mimosa-blog-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Khoảng cách giữa hình và chữ */
    height: 100%;
}

/* --- A. HÌNH ẢNH & Ô NGÀY THÁNG --- */
.mimosa-blog-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Khung hình ngang chuẩn cho Blog */
    border-radius: 8px;
    /* Bo góc đồng bộ với sản phẩm */
    overflow: hidden;
    background-color: #f5f5f5;
}

.mimosa-blog-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mimosa-blog-card:hover .mimosa-blog-img-box img {
    transform: scale(1.05);
    /* Hiệu ứng zoom ảnh mượt mà */
}

/* Date Badge (Ô vuông trắng góc trên bên trái) */
.mimosa-date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    /* Nếu muốn góc phải thì đổi thành right: 15px; */
    background-color: #ffffff;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.mimosa-date-badge .date-month {
    font-family: var(--font-family-primary);
    /* Đã đồng bộ font thường */
    font-size: 11px;
    font-weight: 700;
    color: #999999;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.mimosa-date-badge .date-day {
    font-family: var(--font-family-title);
    /* Đã đồng bộ font title */
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    line-height: 1;
}

/* --- B. NỘI DUNG CHỮ BÊN DƯỚI --- */
.mimosa-blog-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tác giả (Author) */
.mimosa-post-meta {
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mimosa-post-meta .author-name::before {
    content: 'BY ';
    /* Thêm chữ BY đằng trước tên tác giả */
}

/* Tiêu đề bài viết */
.mimosa-post-title {
    margin: 0;
}

.mimosa-post-title a {
    font-family: var(--font-family-title);
    /* Đã đồng bộ font title */
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Cắt nếu dài quá 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.mimosa-post-title a:hover {
    color: #d9534f;
    /* Đổi màu đỏ cam khi hover */
}

/* Đoạn trích (Excerpt) */
.mimosa-post-excerpt {
    font-family: var(--font-family-primary);
    /* Đã đồng bộ font thường */
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 5px;
}

/* Nút Read More */
.mimosa-read-btn {
    font-family: var(--font-family-primary);
    /* Đã đồng bộ font thường */
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
    width: fit-content;
    padding-bottom: 3px;
    /* Tạo khoảng cách giữa chữ và đường gạch */
    transition: color 0.3s ease;
}

/* Đường gạch chân màu đen */
.mimosa-read-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111111;
    transition: background-color 0.3s ease;
}

/* Hover Nút Read More */
.mimosa-read-btn:hover {
    color: #d9534f;
}

.mimosa-read-btn:hover::after {
    background-color: #d9534f;
    /* Gạch chân cũng đổi màu theo */
}

/* =======================================
   3. PHÂN TRANG (PAGINATION DOTS)
   ======================================= */
/* Dành khoảng trống bên dưới slider để chứa dấu chấm */
.mimosa-blog-swiper {
    padding-bottom: 50px !important;
}

.blog-pagination {
    bottom: 0 !important;
}

/* Định dạng dấu chấm (Dots) */
.blog-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #cccccc;
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 6px !important;
}

/* Dấu chấm đang active (To hơn, màu đen) */
.blog-pagination .swiper-pagination-bullet-active {
    background-color: #111111;
    transform: scale(1.4);
}