/* 
==========================================================================
9.0 - COMPONENT: HEADER & NAVIGATION (NEO-BRUTALISM / QUIRKY PUG STYLE)
==========================================================================
*/

/* --- 9.1. Main Header Layout --- */
.site-header.mimosa-layout {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-background);
    /* Nền trắng kem */
    /* Thay vì gạch ngang bình thường, ta dùng viền đen dày cộp kiểu truyện tranh */
    border-bottom: 4px solid var(--color-black);
    padding: 15px 0 25px 0;
    transition: all 0.3s ease;
    /* Hiệu ứng đổ bóng khối cứng (Solid Shadow) cực kỳ đặc trưng của Neo-Brutalism */
    box-shadow: 0 8px 0 var(--color-surface-secondary);
}

.site-header__inner.flex-column-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- 9.2. Hàng 1 (Top Row): Logo & Icons --- */
.header-top-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

.header-left-col {
    justify-self: flex-start;
}

.header-center-col {
    justify-self: center;
}

.header-right-col {
    justify-self: flex-end;
}

/* Logo - Nghiêng ngả vui nhộn */
.site-header__logo img {
    max-height: 120px;
    /* Logo to và rõ ràng */
    width: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(3px 3px 0 var(--color-surface-primary));
    /* Đổ bóng logo màu xanh lá */
}

.site-header__logo a:hover img {
    transform: rotate(-5deg) scale(1.1);
    /* Lắc lư khi hover */
}

/* Các Icons (Search, User, Cart) - Thiết kế kiểu nút bấm đồ chơi */
.header-actions-list {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-action-item a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-white);
    /* Nền trắng */
    color: var(--color-black);
    /* Icon đen */
    border: 3px solid var(--color-black);
    /* Viền đen dày */
    border-radius: 12px;
    /* Không dùng hình tròn nữa, dùng hình vuông bo góc (Squircle) */
    text-decoration: none;
    /* Đổ bóng khối cứng - Signature của Brutalism */
    box-shadow: 4px 4px 0 var(--color-surface-primary);
    transition: all 0.15s ease-out;
}

.header-action-item a .material-icons {
    font-size: 26px;
    font-weight: 900;
}

/* Hiệu ứng bấm nút: Bị lún xuống và mất bóng đổ */
.header-action-item a:hover {
    background-color: var(--color-surface-secondary);
    /* Đổi màu nền sang hồng cam */
    transform: translate(4px, 4px);
    /* Dịch chuyển xuống đúng bằng kích thước shadow */
    box-shadow: 0px 0px 0 var(--color-surface-primary);
    /* Triệt tiêu shadow */
}

/* Badge số lượng giỏ hàng - Kiểu nhãn dán lệch */
.header-cart .count-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--color-accent-hover);
    /* Màu cam chói */
    color: var(--color-white);
    font-family: var(--font-family-title-small);
    font-size: 13px;
    font-weight: 900;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-black);
    /* Viền đen dày */
    box-shadow: 2px 2px 0 var(--color-black);
    transform: rotate(10deg);
    /* Dán lệch lệch cho bụi bặm */
}

/* --- 9.3. Hàng 2 (Bottom Row): Menu Phá Cách (Sticker Style) --- */
.header-bottom-row.desktop-only {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Chặn sự can thiệp của cấu trúc WP */
.site-header__navigation .main-navigation>div {
    display: block !important;
}

/* Container chứa menu */
.site-header__navigation .main-navigation>ul {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Đưa menu ra giữa màn hình */
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 15px;
    /* Khoảng cách giữa các mục */
}

/* Mỗi mục menu là một cái thẻ tag / nhãn dán riêng biệt */
.site-header__navigation .main-navigation>ul>li {
    margin: 0;
}

.site-header__navigation .main-navigation>ul>li>a {
    display: inline-block;
    padding: 8px 20px;
    font-family: var(--font-family-title-small);
    /* DynaPuff */
    font-size: 17px;
    font-weight: 900;
    color: var(--color-black);
    /* Chữ đen đậm */
    background-color: var(--color-surface-tertiary);
    /* Nền be nhạt */
    border: 3px solid var(--color-black);
    /* Viền đen comic */
    border-radius: 8px;
    /* Vuông vức, phá cách */
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0 var(--color-surface-primary);
    /* Bóng xanh lá */
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Cắt bỏ gạch chân mặc định */
.site-header__navigation .main-navigation>ul>li>a::after {
    display: none !important;
}

/* Tạo độ "nghiêng ngả" lộn xộn có chủ đích (Quirky Layout) */
.site-header__navigation .main-navigation>ul>li:nth-child(odd)>a {
    transform: rotate(-2deg);
}

.site-header__navigation .main-navigation>ul>li:nth-child(even)>a {
    transform: rotate(3deg);
}

/* Hover State: Nút lún xuống, đổi màu ngẫu hứng */
.site-header__navigation .main-navigation>ul>li>a:hover {
    background-color: var(--color-surface-primary);
    /* Đổi sang xanh lá */
    color: var(--color-white);
    /* Chữ trắng */
    transform: translate(3px, 3px) rotate(0deg);
    /* Nút bị ép phẳng xuống */
    box-shadow: 0px 0px 0 var(--color-surface-primary);
    /* Mất bóng */
}

/* Active State (Trang đang xem): Nhấn mạnh bằng màu Hồng Cam */
.site-header__navigation .main-navigation>ul>li.current-menu-item>a {
    background-color: var(--color-surface-secondary);
    color: var(--color-black);
    transform: rotate(-4deg) scale(1.05);
    /* To hơn và nghiêng hơn */
    box-shadow: 4px 4px 0 var(--color-black);
    /* Bóng đổi sang màu đen */
}


/* 
==========================================================================
10.0 - RESPONSIVE MOBILE NAVIGATION (NEO-BRUTALISM)
==========================================================================
*/
.mobile-nav-toggle {
    display: none;
}

@media (min-width: 993px) {
    .desktop-only {
        display: block !important;
    }
}

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

    .site-header.mimosa-layout {
        padding: 15px 0;
        border-bottom-width: 3px;
        box-shadow: 0 5px 0 var(--color-surface-secondary);
    }

    .site-header__inner.flex-column-layout {
        gap: 0;
    }

    /* Nút Hamburger kiểu hình khối */
    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface-secondary);
        /* Nền hồng cam */
        border: 3px solid var(--color-black);
        padding: 5px;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        box-shadow: 3px 3px 0 var(--color-black);
        transition: all 0.15s ease;
    }

    .mobile-nav-toggle:active {
        transform: translate(3px, 3px);
        box-shadow: 0 0 0 var(--color-black);
    }

    .hamburger-box {
        position: relative;
        width: 22px;
        height: 16px;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--color-black);
        border-radius: 2px;
    }

    .hamburger-inner {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-inner::before {
        content: '';
        top: -7px;
    }

    .hamburger-inner::after {
        content: '';
        bottom: -7px;
    }

    /* Lớp phủ nhòa nhẹ */
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 59, 41, 0.6);
        /* Ám xanh */
        backdrop-filter: blur(5px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    body.mobile-nav-active .mobile-nav-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* Bảng Menu Mobile - Kiểu cuộn giấy dán tường */
    .mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--color-background);
        border-left: 5px solid var(--color-black);
        /* Viền to ngăn cách */
        z-index: 10000;
        transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        /* Hiệu ứng nảy vào */
        overflow-y: auto;
    }

    body.mobile-nav-active .mobile-nav {
        right: 0;
    }

    .mobile-nav__inner {
        padding: 30px 25px;
    }

    .mobile-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Từng cục menu trên Mobile cũng biến thành nút bấm to đùng */
    .mobile-menu li {
        margin: 0;
    }

    .mobile-menu li a {
        display: block;
        padding: 15px;
        background-color: var(--color-white);
        border: 3px solid var(--color-black);
        border-radius: 8px;
        box-shadow: 4px 4px 0 var(--color-surface-primary);
        /* Bóng xanh */
        font-family: var(--font-family-title-small);
        font-size: 18px;
        color: var(--color-black);
        font-weight: 900;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
    }

    .mobile-menu li a:active {
        transform: translate(4px, 4px);
        box-shadow: 0 0 0 var(--color-surface-primary);
        background-color: var(--color-surface-secondary);
    }

    /* Icon User trên Mobile */
    .mobile-actions-list {
        margin-top: 30px;
        padding: 20px 0 0 0;
        border-top: 4px solid var(--color-black);
        list-style: none;
    }

    .mobile-actions-list li a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px;
        background-color: var(--color-black);
        color: var(--color-white);
        font-weight: 900;
        text-decoration: none;
        border-radius: 8px;
        font-family: var(--font-family-title-small);
        text-transform: uppercase;
    }
}

/* 
==========================================================================
10.0 - HERO SLIDER (PUG "BIG-IMAGE" BREAKOUT STYLE)
==========================================================================
*/

.mimosa-slider-section {
    padding: 0 30px 30px 30px;
    /* Bỏ padding trên để tạo cảm giác gắn liền với menu */
}

.mimosa-swiper {
    border: 4px solid var(--color-black);
    border-radius: 30px;
    /* Bo góc tròn trịa hơn */
    background: var(--color-white);
    box-shadow: 12px 12px 0 var(--color-surface-primary);
    /* Shadow cứng, đậm */
    overflow: visible;
    /* QUAN TRỌNG: Để ảnh có thể tràn ra ngoài khung */
}

.mimosa-slide-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 60px;
    background: var(--color-surface-tertiary);
    min-height: 600px;
    /* Tăng chiều cao slide */
}

.mimosa-slide-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
}

/* --- TĂNG TỈ LỆ NỘI DUNG --- */
.mimosa-slide-content {
    flex: 0 0 40%;
    /* Chỉ chiếm 40% để nhường chỗ cho ảnh */
    z-index: 2;
}

/* --- ẢNH PUG SIÊU TO --- */
.mimosa-slide-image {
    flex: 0 0 55%;
    /* Tăng ảnh lên 55% không gian */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mimosa-main-img {
    width: 100%;
    max-width: 700px;
    /* Ảnh cực lớn */
    height: auto;
    transform: rotate(2deg) scale(1.1);
    /* Phóng to và nghiêng nhẹ */
    border: 6px solid var(--color-black);
    /* Viền ảnh dày như Sticker */
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 15px 15px 0 var(--color-surface-primary);
    /* Shadow xanh lá cực mạnh */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hiệu ứng Pug "nhảy" khi di chuột vào slider */
.mimosa-slide-item:hover .mimosa-main-img {
    transform: rotate(0deg) scale(1.15);
    /* Bung ra to hơn khi hover */
    box-shadow: 20px 20px 0 var(--color-surface-primary);
}

/* --- TYPOGRAPHY CỰC LỚN --- */
.mimosa-title {
    font-size: clamp(4rem, 10vw, 8rem);
    /* Chữ siêu to */
    line-height: 0.85;
    margin-bottom: 25px;
    color: var(--color-surface-primary);
    text-shadow: 6px 6px 0 var(--color-surface-secondary);
}

.mimosa-subtitle {
    font-size: 20px;
    background: var(--color-surface-secondary);
    padding: 8px 20px;
    margin-bottom: 15px;
    display: inline-block;
    border: 3px solid var(--color-black);
    font-weight: 900;
}

/* 
==========================================================================
RESPONSIVE: MOBILE & TABLET
==========================================================================
*/
@media (max-width: 992px) {
    .mimosa-slide-item {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
        min-height: auto;
    }

    .mimosa-slide-content {
        flex: 0 0 100%;
        order: 2;
        /* Đưa text xuống dưới ảnh */
        margin-top: 40px;
    }

    .mimosa-slide-image {
        flex: 0 0 100%;
        order: 1;
        /* Đưa ảnh lên trên */
    }

    .mimosa-main-img {
        max-width: 90%;
        /* Ảnh choán hết màn hình điện thoại */
        transform: rotate(0deg);
        box-shadow: 8px 8px 0 var(--color-surface-primary);
    }
}

/* 
==========================================================================
11.0 - COMPONENT: CUSTOM PUG-STYLE SLIDER ARROWS 
==========================================================================
*/

/* Xóa bỏ style mặc định của Swiper */
.swiper-button-next:after,
.swiper-button-prev:after {
    display: none !important;
    /* Xóa icon mũi tên mặc định của swiper */
}

/* Định dạng chung cho 2 nút */
.swiper-button-next,
.swiper-button-prev {
    width: 65px !important;
    /* To hơn, dễ bấm hơn */
    height: 65px !important;
    background-color: var(--color-white) !important;
    border: 4px solid var(--color-black) !important;
    /* Viền đen dày */
    border-radius: 16px !important;
    /* Bo góc mập mạp */
    box-shadow: 6px 6px 0 var(--color-surface-primary) !important;
    /* Bóng xanh lá */
    transition: all 0.15s ease-out !important;
    cursor: pointer !important;
    margin-top: -30px !important;
    z-index: 10;
}

/* Hiệu ứng khi bấm (nút lún xuống) */
.swiper-button-next:active,
.swiper-button-prev:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0 0 0 var(--color-surface-primary) !important;
    background-color: var(--color-surface-secondary) !important;
    /* Đổi sang màu hồng cam khi bấm */
}

/* Thêm icon mũi tên (Material Icons) vào trong nút */
.swiper-button-next::before,
.swiper-button-prev::before {
    font-family: 'Material Icons';
    font-size: 32px;
    color: var(--color-black);
    font-weight: 900;
}

.swiper-button-next::before {
    content: 'arrow_forward';
}

.swiper-button-prev::before {
    content: 'arrow_back';
}

/* Căn lề nút cho đẹp */
.swiper-button-next {
    right: 20px !important;
}

.swiper-button-prev {
    left: 20px !important;
}

/* --- Responsive cho mobile: Nút nhỏ lại tí cho gọn --- */
@media (max-width: 768px) {

    .swiper-button-next,
    .swiper-button-prev {
        width: 45px !important;
        height: 45px !important;
        border-width: 3px !important;
        box-shadow: 4px 4px 0 var(--color-surface-primary) !important;
    }

    .swiper-button-next::before,
    .swiper-button-prev::before {
        font-size: 24px;
    }
}

/* 
==========================================================================
12.0 - PAGINATION (DẤU CHẤM DƯỚI CÙNG)
==========================================================================
*/

.swiper-pagination {
    bottom: 20px !important;
}

.swiper-pagination-bullet {
    width: 14px !important;
    height: 14px !important;
    background: var(--color-white) !important;
    border: 2px solid var(--color-black) !important;
    opacity: 1 !important;
    border-radius: 4px !important;
    /* Hình vuông bo góc */
    margin: 0 6px !important;
    transition: all 0.3s !important;
}

.swiper-pagination-bullet-active {
    background: var(--color-surface-secondary) !important;
    /* Màu hồng cam */
    width: 30px !important;
    /* Hình chữ nhật cho bullet đang active */
    border-color: var(--color-black) !important;
}

/* 
==========================================================================
13.0 - COMPONENT: SHOP BY CATEGORY (STICKER GRID STYLE)
==========================================================================
*/

.mimosa-category-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--color-background);
}

.mimosa-section-header {
    margin-bottom: 60px;
}

.mimosa-heading {
    font-family: var(--font-family-title);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--color-surface-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--color-surface-secondary);
}

.mimosa-subheading {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    font-family: var(--font-family-primary);
}

/* Grid layout cho 4 cột */
.mimosa-cat-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* --- Sticker Category Card --- */
.mimosa-cat-card {
    display: block;
    text-decoration: none;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    /* Viền đen dày */
    border-radius: 20px;
    padding: 15px;
    box-shadow: 8px 8px 0 var(--color-surface-primary);
    /* Shadow xanh lá */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mimosa-cat-card:hover {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--color-surface-primary);
    background-color: var(--color-surface-tertiary);
}

/* Khung ảnh */
.mimosa-cat-img-wrapper {
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
    margin-bottom: 15px;
    border: 2px solid var(--color-black);
}

.mimosa-cat-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Ảnh vuông chằn chặn */
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mimosa-cat-card:hover .mimosa-cat-img {
    transform: scale(1.1);
}

/* Tên danh mục */
.mimosa-cat-name {
    font-family: var(--font-family-title-small);
    font-size: 1.4rem;
    color: var(--color-black);
    margin: 0;
    text-transform: uppercase;
    padding: 10px 0;
}

/* --- Responsive cho Tablet & Mobile --- */
@media (max-width: 992px) {
    .mimosa-cat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cột trên Tablet */
    }
}

@media (max-width: 576px) {
    .mimosa-cat-grid-4 {
        grid-template-columns: 1fr;
        /* 1 cột trên Mobile */
    }

    .mimosa-cat-card {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* 
==========================================================================
14.0 - COMPONENT: PRODUCT CARDS (LATEST ARRIVALS - STICKER STYLE)
==========================================================================
*/

.btn--quick-view .material-icons {
    color: #333;
}

.btn--quick-view:hover .btn--quick-view .material-icons {
    color: #fff;
}

.mimosa-latest-arrivals-section {
    padding: 80px 0;
    background-color: var(--color-background);
}

/* --- Product Card (Cái hộp sản phẩm) --- */
.mimosa-product-card {
    background: var(--color-white);
    border: 4px solid var(--color-black);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 6px 6px 0 var(--color-surface-primary);
    /* Shadow xanh lá */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.mimosa-product-card:hover {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--color-surface-primary);
}

/* --- Khung ảnh (Tràn viền) --- */
.mimosa-img-wrapper {
    position: relative;
    border: 3px solid var(--color-black);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    background: var(--color-surface-tertiary);
}

.product-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mimosa-product-card:hover .product-img {
    transform: scale(1.1);
}

/* Badge Sale - Sticker góc */
.mimosa-badge-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-accent-hover);
    color: var(--color-white);
    padding: 5px 12px;
    border: 2px solid var(--color-black);
    border-radius: 8px;
    font-weight: 900;
    font-family: var(--font-family-title-small);
    transform: rotate(-10deg);
}

/* Nút Quick View - Nút nổi (Floating) */
.mimosa-floating-icons {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: all 0.3s;
}

.mimosa-product-card:hover .mimosa-floating-icons {
    opacity: 1;
}

.mimosa-icon-btn {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--color-black);
}

/* Add To Cart - Nút bấm "bự" ở dưới ảnh */
.mimosa-atc-wrap {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    padding: 0 10px;
    transition: bottom 0.3s ease;
}

.mimosa-product-card:hover .mimosa-atc-wrap {
    bottom: 15px;
}

.mimosa-atc-btn {
    display: block;
    background: var(--color-surface-primary);
    color: var(--color-white);
    text-align: center;
    padding: 12px;
    font-weight: 900;
    font-family: var(--font-family-title-small);
    border: 2px solid var(--color-black);
    border-radius: 8px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--color-black);
}

/* --- Thông tin sản phẩm --- */
.mimosa-info {
    padding: 5px;
}

.mimosa-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mimosa-category-name {
    font-size: 13px;
    font-weight: bold;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.mimosa-name {
    font-family: var(--font-family-title);
    font-size: 1.2rem;
    margin: 5px 0;
    color: var(--color-black);
}

.mimosa-price {
    font-family: var(--font-family-title-small);
    font-size: 1.3rem;
    color: var(--color-accent-hover);
    font-weight: 900;
}

/* --- Tinh chỉnh Swiper (Mũi tên điều hướng cho Latest Arrivals) --- */
.mimosa-products-swiper {
    padding: 20px 0 50px 0;
}

/* 
==========================================================================
15.0 - COMPONENT: SERVICE FEATURES (POWER CARDS - STICKER STYLE)
==========================================================================
*/

.milano-features-section {
    padding: 60px 0;
    background-color: var(--color-background);
}

.milano-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Khoảng cách giữa các thẻ bài */
}

/* --- Thẻ bài tính năng --- */
.milano-feature-item {
    display: flex;
    align-items: center;
    background-color: #FFDE59;
    /* Màu vàng "hút mắt" đúng yêu cầu */
    border: 4px solid var(--color-black);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 6px 6px 0 var(--color-black);
    /* Shadow đen mạnh mẽ */
    transition: all 0.2s ease-out;
}

/* Hover: Nhấn nút xuống */
.milano-feature-item:hover {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--color-black);
    background-color: var(--color-surface-secondary);
    /* Đổi sang hồng cam khi hover */
}

/* --- Icon bên trái --- */
.milano-feature-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 3px solid var(--color-black);
    border-radius: 12px;
    margin-right: 15px;
    box-shadow: 3px 3px 0 var(--color-black);
}

.milano-feature-icon .material-icons {
    font-size: 28px;
    color: var(--color-black);
}

/* --- Nội dung (Text) --- */
.milano-feature-content {
    flex-grow: 1;
}

.milano-feature-title {
    font-family: var(--font-family-title-small);
    font-size: 1.1rem;
    color: var(--color-black);
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.milano-feature-desc {
    font-size: 0.9rem;
    color: var(--color-black);
    opacity: 0.8;
    margin: 0;
    font-weight: 600;
}

/* 
==========================================================================
RESPONSIVE: Tablet & Mobile
==========================================================================
*/
@media (max-width: 992px) {
    .milano-features-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cột trên Tablet */
    }
}

@media (max-width: 576px) {
    .milano-features-grid {
        grid-template-columns: 1fr;
        /* 1 cột trên Mobile */
    }

    .milano-feature-item {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* 
==========================================================================
16.0 - COMPONENT: BESTSELLING TABS (CANDY-STICKER TABS)
==========================================================================
*/

.mimosa-bestselling-section {
    padding: 80px 0;
    background-color: var(--color-background);
}

/* --- Navigation Tabs (Các "Cục Kẹo" điều hướng) --- */
.mimosa-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.mimosa-tab-btn {
    padding: 12px 28px;
    background: var(--color-white);
    border: 3px solid var(--color-black);
    border-radius: 12px;
    font-family: var(--font-family-title-small);
    font-size: 16px;
    font-weight: 900;
    color: var(--color-black);
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--color-surface-primary);
    /* Shadow Xanh */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mimosa-tab-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--color-surface-primary);
}

/* Tab đang Active: Đổi màu sang Cam nổi bật */
.mimosa-tab-btn.active {
    background: var(--color-surface-secondary);
    /* Nền hồng cam */
    border-color: var(--color-black);
    color: var(--color-white);
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--color-black);
}

/* --- Content Wrapper (Ẩn/Hiện sản phẩm) --- */
.mimosa-product-group {
    display: none;
    /* Ẩn toàn bộ mặc định */
    animation: fadeIn 0.5s ease;
}

.mimosa-product-group.active {
    display: block;
    /* Hiện cái được chọn */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* --- Badge Sale Tròn (Độc lạ) --- */
.mimosa-badge-sale-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    border: 3px solid var(--color-surface-secondary);
    z-index: 5;
}

/* --- Tinh chỉnh Card sản phẩm cho phần Bestselling --- */
.mimosa-product-group .mimosa-product-card {
    border-width: 4px;
    /* Viền dày */
}

/* --- Thêm JS (Bạn nhớ dán cái này vào file JS của theme nhé) --- */

/* 
==========================================================================
17.0 - COMPONENT: BLOG POST CARDS (NEWSPAPER STICKER STYLE)
==========================================================================
*/

.mimosa-blog-section {
    padding: 80px 0;
    background-color: var(--color-background);
}

/* --- Blog Card --- */
.mimosa-blog-card {
    background: var(--color-white);
    border: 4px solid var(--color-black);
    border-radius: 20px;
    padding: 10px;
    box-shadow: 6px 6px 0 var(--color-surface-primary);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.mimosa-blog-card:hover {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--color-surface-primary);
}

/* --- Image Box (Khung ảnh) --- */
.mimosa-blog-img-box {
    position: relative;
    border: 3px solid var(--color-black);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

.mimosa-blog-img-box img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mimosa-blog-card:hover img {
    transform: scale(1.1);
}

/* Date Badge (Tem thư - Tem dán) */
.mimosa-date-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-white);
    border: 3px solid var(--color-black);
    border-radius: 8px;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 3px 3px 0 var(--color-black);
    z-index: 2;
}

.date-month {
    font-family: var(--font-family-title-small);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
}

.date-day {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-accent-hover);
}

/* --- Nội dung blog --- */
.mimosa-blog-info {
    padding: 10px;
}

.mimosa-post-title {
    font-family: var(--font-family-title);
    font-size: 1.3rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

.mimosa-post-title a {
    color: var(--color-black);
    text-decoration: none;
}

.mimosa-post-meta {
    font-size: 12px;
    font-weight: 900;
    color: var(--color-surface-primary);
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.mimosa-post-excerpt {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Nút Read More (Kiểu Sticker - Vàng) */
.mimosa-read-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #FFDE59;
    /* Vàng "đặc sản" của section features */
    border: 3px solid var(--color-black);
    border-radius: 8px;
    font-family: var(--font-family-title-small);
    font-weight: 900;
    color: var(--color-black);
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 var(--color-black);
    transition: all 0.2s;
}

.mimosa-read-btn:hover {
    background: var(--color-surface-secondary);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--color-black);
}

/* --- Pagination màu sắc (Sticker style) --- */
.blog-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-black);
    background: var(--color-white);
    border-radius: 4px;
    opacity: 1;
}

.blog-pagination .swiper-pagination-bullet-active {
    background: var(--color-black);
}