/* ==========================================================================
   CSS CUSTOM CHO HEADER (MÀU ĐEN - MENU TRÁI - LOGO GIỮA - ICON PHẢI)
   ========================================================================== */

/* 1. Reset lại header thành màu đen */
.site-header.site-header--dark {
    background-color: #000000;
    border-bottom: none;
    /* Xóa viền xám cũ */
    height: 80px;
    /* Chiều cao header */
}

/* 2. Sử dụng Grid để đảm bảo Logo luôn nằm chính giữa tuyệt đối */
.custom-header-layout {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
}

.custom-header-layout .site-header__navigation {
    justify-self: flex-start;
    /* Menu sát trái */
    display: flex;
}

.custom-header-layout .site-header__logo {
    justify-self: center;
    /* Logo ở giữa */
    text-align: center;
}

.custom-header-layout .site-header__actions {
    justify-self: flex-end;
    /* Icon sát phải */
}

/* 3. Style cho Logo Text (Nếu không dùng ảnh) */
.custom-logo-text {
    font-family: 'Arial', sans-serif;
    /* Hoặc font logo của bạn */
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 1px;
}

/* 4. Style cho Menu (Màu trắng, Active màu Cyan, có mũi tên) */
.site-header.site-header--dark .main-navigation ul li a {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 15px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 4px;
    /* Khoảng cách chữ và mũi tên */
}

/* Tạo mũi tên dropdown (giống hình chữ V nhỏ) */
.site-header.site-header--dark .main-navigation ul li.menu-item-has-children>a::after {
    content: '\e313';
    /* Mã icon expand_more trong Material Icons */
    font-family: 'Material Icons';
    font-size: 16px;
    font-weight: normal;
}

/* Hover và Active state (Màu Xanh Cyan) */
.site-header.site-header--dark .main-navigation ul li a:hover,
.site-header.site-header--dark .main-navigation ul li.current-menu-item>a {
    color: #00E5FF;
    /* Màu xanh giống hình */
}

.site-header.site-header--dark .main-navigation ul li a::after {
    display: none;
    /* Tắt cái gạch chân của code cũ */
}

/* 5. Style cho Icons bên phải */
.site-header.site-header--dark .header-action-item a {
    color: #FFFFFF;
    transition: color 0.3s ease;
}

.site-header.site-header--dark .header-action-item a:hover {
    color: #00E5FF;
}

.site-header.site-header--dark .header-action-item .material-icons {
    font-size: 24px;
    /* Kích thước icon */
}

/* 6. Style cho Badges (Số lượng giỏ hàng/yêu thích) */
.custom-cyan-badge {
    background-color: #00E5FF !important;
    /* Đè màu cũ */
    color: #000000 !important;
    /* Chữ màu đen hoặc trắng tùy bạn, hình như chữ đen dễ đọc hơn */
    font-size: 11px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    top: -6px;
    right: -8px;
    border-radius: 50%;
}

/* ==========================================================================
   7. RESPONSIVE FIX TRÊN MOBILE / TABLET (Hiện lại Icon + Chống vỡ layout)
   ========================================================================== */
@media (max-width: 992px) {

    /* Ép Header thành 1 hàng ngang: Logo trái - Icon phải */
    .custom-header-layout {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding: 0 15px;
        /* Thêm chút lề 2 bên cho khỏi sát mép */
    }

    /* 1. ẨN TEXT MENU CHÍNH (Shop, About Us...) */
    .custom-header-layout .site-header__navigation {
        display: none !important;
    }

    /* 2. CHỈNH LẠI LOGO CHO GỌN */
    .custom-header-layout .site-header__logo {
        flex: 1;
        text-align: left;
    }

    .custom-header-layout .site-header__logo img {
        max-height: 50px !important;
        /* Thu nhỏ logo lại */
        width: auto;
        object-fit: contain;
    }

    /* 3. HIỆN LẠI CÁC ACTION (Kính lúp, Giỏ hàng...) */
    .site-header__actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    .desktop-actions {
        display: flex !important;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    /* Ẩn bớt icon User trên mobile cho đỡ chật (vì nó có trong menu 3 gạch rồi) */
    .header-account.desktop-only {
        display: none !important;
    }

    /* Thu nhỏ khoảng cách và kích thước icon trên mobile để không bị rớt dòng */
    .site-header__actions .header-action-item {
        margin-left: 12px !important;
        /* Khoảng cách giữa các icon nhỏ lại */
    }

    .site-header.site-header--dark .header-action-item .material-icons {
        font-size: 22px;
        /* Icon nhỏ lại một chút */
    }

    /* 4. CHỈNH LẠI NÚT HAMBURGER (3 GẠCH) */
    .mobile-nav-toggle {
        display: block !important;
        margin-left: 15px !important;
        /* Cách các icon ra 1 chút */
        z-index: 1001;
    }

    .site-header.site-header--dark .mobile-nav-toggle .hamburger-inner,
    .site-header.site-header--dark .mobile-nav-toggle .hamburger-inner::before,
    .site-header.site-header--dark .mobile-nav-toggle .hamburger-inner::after {
        background-color: #FFFFFF !important;
        /* Màu trắng cho dễ nhìn trên nền đen */
    }
}

/* ==========================================================================
   HERO SLIDER SECTION (BLACK FRIDAY SALE)
   ========================================================================== */

/* 1. Reset Container để tràn viền 100% (Ghi đè style inline trong HTML) */
.hero-slider-section .container-fluid {
    padding: 0 !important;
    /* Xóa khoảng trắng 2 bên */
}

/* 2. Thiết lập kích thước cho Slider */
.hero-slider-milano .swiper-slide {
    height: 80vh;
    /* Chiều cao bằng 80% màn hình, có thể đổi thành 600px, 700px tùy ý */
    min-height: 500px;
    position: relative;
    background-color: #000;
    /* Nền dự phòng trước khi load ảnh */
}

/* Khung chứa ảnh và nội dung bên trong */
.slide-inner-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 3. Style cho Ảnh nền (Background Image) */
.milano-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Đảm bảo ảnh luôn phủ kín màn hình mà không bị méo */
    object-position: center;
    z-index: 1;
}

/* 4. Lớp phủ đen trong suốt (Overlay) giúp chữ nổi bật trên nền ảnh */
.milano-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Màu đen trong suốt 40% */
    z-index: 2;
}

/* 5. Căn chỉnh cụm Nội dung Text (Căn trái, giữa chiều dọc) */
.milano-slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    /* Căn giữa theo chiều dọc */
    padding-left: 10%;
    /* Cách lề trái 10% màn hình */
}

.content-box {
    max-width: 800px;
    /* Giới hạn chiều rộng của text */
    text-align: left;
}

/* 6. Typography (Chữ) */
/* Dòng text nhỏ (UP TO 60% OFF) */
.milano-subtitle {
    display: block;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-family: var(--font-family-title, 'Arial', sans-serif);
}

/* Dòng text lớn (BLACK FRIDAY SALE) */
.milano-title {
    color: #FFFFFF;
    font-size: clamp(45px, 6vw, 85px);
    /* Tự động co giãn kích thước chữ theo màn hình */
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 40px 0;
    font-family: var(--font-family-title, 'Arial', sans-serif);
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
    /* Đổ bóng nhẹ cho chữ sắc nét hơn */
}

/* 7. Nút bấm (Button SHOP COLLECTION) */
.btn-milano-pill {
    display: inline-block;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 32px;
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
    border-radius: 0;
    /* Để 0 vì trong hình nút là hình chữ nhật vuông vức */
}

/* Hiệu ứng khi hover vào nút */
.btn-milano-pill:hover {
    background-color: var(--color-accent-hover, #00E5FF);
    /* Đổi màu nền (dùng biến màu xanh cyan của bạn nếu có) */
    color: #000000;
    /* Đổi màu chữ */
    transform: translateY(-2px);
    /* Nổi nhẹ lên */
}

/* ==========================================================================
   RESPONSIVE CHO MOBILE & TABLET
   ========================================================================== */
@media (max-width: 992px) {
    .hero-slider-milano .swiper-slide {
        height: 60vh;
        /* Giảm chiều cao trên tablet */
        min-height: 400px;
    }

    .milano-slide-content {
        padding-left: 5%;
        /* Thu hẹp lề trái */
    }
}

@media (max-width: 768px) {
    .hero-slider-milano .swiper-slide {
        height: 60vh;
        /* Thu gọn chiều cao slider trên đt */
    }

    .milano-slide-content {
        padding-left: 20px;
        padding-right: 20px;
        align-items: center;
        /* Vẫn căn giữa chiều dọc */
    }

    .milano-subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .milano-title {
        margin-bottom: 30px;
    }

    .btn-milano-pill {
        padding: 14px 28px;
        /* Nút nhỏ lại 1 chút */
    }
}

/* ==========================================================================
   SHOP BY CATEGORY FULLWIDTH GRID (GIỐNG ẢNH 100%)
   ========================================================================== */

/* 1. Xóa padding section nếu cần để nó dính sát lên trên */
.milano-category-section-full {
    padding-top: var(--spacing-xl);
    padding-bottom: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* 2. Lưới Grid 4 cột, khoảng cách (gap) = 0 để ảnh dính liền nhau */
.milano-cat-grid-full {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    /* Quan trọng: Xóa khoảng trống giữa các ảnh */
    width: 100%;
}

/* 3. Thiết lập từng Card */
.milano-cat-card-full {
    position: relative;
    display: block;
    height: 70vh;
    /* Chiều cao bằng 70% màn hình */
    min-height: 500px;
    overflow: hidden;
    text-decoration: none;
    background-color: #111;
}

/* 4. Ảnh Nền (Background Image) */
.milano-cat-card-full .cat-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover phóng to ảnh nhẹ nhàng */
.milano-cat-card-full:hover .cat-bg-img {
    transform: scale(1.08);
}

/* 5. Lớp phủ Gradient Đen (Từ dưới lên) */
.cat-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    /* Che 60% từ dưới lên */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Thêm lớp phủ đen nhẹ toàn phần để giống ảnh mẫu có tone trầm */
.milano-cat-card-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 1;
    transition: background-color 0.3s ease;
}

.milano-cat-card-full:hover::before {
    background-color: rgba(0, 0, 0, 0.3);
    /* Tối hơn 1 chút khi hover */
}

/* 6. Tên Danh Mục (Dưới cùng bên trái) */
.cat-title-bottom {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 2;
    margin: 0;
    font-family: var(--font-family-title, sans-serif);
    letter-spacing: 1px;
}

/* 7. Chữ Dọc (Góc trên bên phải) */
.cat-vertical-text {
    position: absolute;
    top: 30px;
    right: 20px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    /* Lệnh CSS tạo chữ dọc */
    text-orientation: mixed;
    z-index: 2;
    opacity: 0.9;
}

/* 8. Nút Mũi Tên (Góc dưới bên phải - Hiện rõ hình vuông màu trắng giống ảnh 1 & 4) */
.cat-arrow-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.3s ease;
    opacity: 0;
    /* Ẩn đi mặc định, chỉ hiện khi hover. Nếu muốn luôn hiện thì xóa dòng này */
    transform: translateX(-10px);
}

.milano-cat-card-full:hover .cat-arrow-btn {
    opacity: 1;
    transform: translateX(0);
    background-color: var(--color-accent-hover, #00E5FF);
    /* Đổi màu xanh khi hover card */
}

/* ==========================================================================
   RESPONSIVE CHO SECTION NÀY
   ========================================================================== */
@media (max-width: 1200px) {
    .cat-title-bottom {
        font-size: 20px;
        left: 20px;
        bottom: 20px;
    }

    .cat-arrow-btn {
        right: 20px;
        bottom: 20px;
    }
}

@media (max-width: 992px) {

    /* Tablet: Chuyển thành 2 cột */
    .milano-cat-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }

    .milano-cat-card-full {
        height: 50vh;
        min-height: 400px;
    }
}

@media (max-width: 576px) {

    /* Mobile: Chuyển thành 1 cột */
    .milano-cat-grid-full {
        grid-template-columns: 1fr;
    }

    .milano-cat-card-full {
        height: 60vh;
    }

    .cat-arrow-btn {
        opacity: 1;
        /* Trên mobile luôn hiện mũi tên vì không có hover */
        transform: none;
    }
}

/* ==========================================================================
   PRODUCT HIGHLIGHTS SECTION (GIỐNG ẢNH 100%)
   ========================================================================== */

.milano-highlights-section {
    padding: 60px 0;
    background-color: #FFFFFF;
}

/* 1. Header Title */
.milano-highlights-section .milano-section-header {
    margin-bottom: 50px;
}

.milano-highlights-section .milano-heading {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    font-family: var(--font-family-title, sans-serif);
    margin: 0;
}

/* 2. Slider Wrapper (Để định vị mũi tên) */
.highlights-slider-wrap {
    position: relative;
    padding: 0 40px;
    /* Nhường chỗ cho 2 mũi tên 2 bên */
}

/* 3. Product Card */
.highlight-product-card {
    background: #fff;
    position: relative;
}

/* Khu vực ảnh */
.hl-img-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}

.hl-product-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1/1;
    /* Ảnh vuông */
    transition: transform 0.4s ease;
}

.highlight-product-card:hover .hl-product-img {
    transform: scale(1.05);
    /* Phóng to ảnh nhẹ khi hover */
}

/* Badge Sale (Màu cam) */
.hl-badge-sale {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FF5722;
    /* Màu cam giống ảnh */
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    z-index: 2;
}

/* 4. Action Buttons (4 nút dàn ngang) */
.hl-action-buttons {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 3;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.3s ease;
}

.highlight-product-card:hover .hl-action-buttons {
    opacity: 1;
    transform: translateY(0);
}

.hl-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #111111;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: all 0.2s ease;
}

.hl-btn .material-icons {
    font-size: 20px;
}

.hl-btn:hover {
    background-color: #111111;
    color: #FFFFFF;
}

/* 5. Thông tin sản phẩm (Căn trái) */
.hl-info {
    text-align: left;
    padding: 0 10px;
}

/* Đánh giá sao & text */
.hl-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hl-stars .material-icons {
    font-size: 14px;
    color: #D1D5DB;
    /* Màu xám nhạt */
}

.hl-review-count {
    font-size: 12px;
    color: #9CA3AF;
}

/* Tên sản phẩm */
.hl-name {
    font-size: 15px;
    font-weight: 500;
    color: #111111;
    margin: 0 0 10px 0;
    font-family: var(--font-family-primary, sans-serif);
}

.hl-name a {
    color: inherit;
    text-decoration: none;
}

.hl-name a:hover {
    color: #FF5722;
    /* Hover đổi màu cam */
}

/* Giá tiền */
.hl-price {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Cấu trúc giá mặc định của WooCommerce */
.hl-price del,
.hl-price del span {
    color: #9CA3AF;
    /* Giá cũ màu xám */
    font-weight: 400;
    font-size: 14px;
    margin-right: 8px;
}

.hl-price ins,
.hl-price ins span,
.hl-price>span {
    color: #EF4444;
    /* Giá mới màu đỏ */
    text-decoration: none;
}

/* 6. Chấm màu sắc (Swatches) */
.hl-swatches {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hl-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    /* Viền vô hình để canh kích thước */
    box-sizing: content-box;
    background-clip: content-box;
    padding: 2px;
    /* Khoảng cách giữa màu và viền khi active */
}

.hl-color.active,
.hl-color:hover {
    border-color: #111111;
    /* Hiển thị vòng tròn đen bao quanh khi chọn */
}

/* 7. Mũi tên Navigation (Nằm ngoài khung sản phẩm) */
.hl-nav-prev,
.hl-nav-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    color: #111;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hl-nav-prev {
    left: -10px;
}

.hl-nav-next {
    right: -10px;
}

/* Ẩn chữ prev/next mặc định của Swiper */
.hl-nav-prev::after,
.hl-nav-next::after {
    display: none;
}

/* 8. Nút VIEW ALL PRODUCT (Dưới cùng) */
.hl-view-all-wrap {
    margin-top: 50px;
}

.btn-hl-view-all {
    display: inline-block;
    padding: 14px 40px;
    background-color: transparent;
    color: #111111;
    border: 1px solid #111111;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-hl-view-all:hover {
    background-color: #111111;
    color: #FFFFFF;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .highlights-slider-wrap {
        padding: 0;
        /* Thu nhỏ trên mobile, Ẩn mũi tên hoặc để lấn vào trong */
    }

    .hl-nav-prev,
    .hl-nav-next {
        display: none;
        /* Mobile dùng vuốt tay nên ẩn mũi tên cho gọn */
    }
}

@media (max-width: 576px) {
    .hl-action-buttons {
        opacity: 1;
        /* Hiện sẵn nút trên mobile vì không có chuột để hover */
        transform: none;
        bottom: 5px;
    }

    .hl-btn {
        width: 32px;
        height: 32px;
    }

    .hl-btn .material-icons {
        font-size: 16px;
    }
}

/* ==========================================================================
   SERVICE FEATURES SECTION (GIỐNG ẢNH 100%)
   ========================================================================== */

/* 1. Reset khoảng cách section */
.milano-features-section {
    padding: 80px 0;
    background-color: #FFFFFF;
    /* Nền trắng để làm nổi bật bóng đổ */
}

/* 2. Cấu trúc Lưới (Grid) - Chia 4 cột bằng nhau */
.milano-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Hiển thị 4 items trên 1 hàng ngang */
    gap: 30px;
    /* Khoảng cách giữa các hộp */
}

/* 3. Khung Box Trắng chứa nội dung (Trái tim của thiết kế này) */
.milano-feature-item {
    background-color: #FFFFFF;
    padding: 40px 30px;
    display: flex;
    /* Dàn ngang Icon và Text */
    align-items: center;
    /* Căn giữa theo chiều dọc */
    gap: 20px;
    /* Khoảng cách giữa Icon và Text */
    border-radius: 4px;

    /* Đây là công thức tạo bóng đổ siêu mềm mịn (Soft Drop Shadow) giống y hệt ảnh */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.02);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng nổi lên nhẹ nhàng khi rê chuột vào */
.milano-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06), 0 10px 20px rgba(0, 0, 0, 0.03);
}

/* 4. Định dạng Icon bên trái */
.milano-feature-icon {
    flex-shrink: 0;
    /* Ngăn không cho icon bị bóp méo khi màn hình nhỏ */
}

.milano-feature-icon .material-icons {
    font-size: 42px;
    /* Kích thước icon to rõ ràng */
    color: #00d2b5;
    /* Màu xanh ngọc (Cyan/Teal) cực chuẩn theo ảnh mẫu */
}

/* 5. Cụm Text bên phải */
.milano-feature-content {
    text-align: left;
}

/* Tiêu đề (Đen, In hoa, In đậm) */
.milano-feature-title {
    font-size: 14px;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    font-family: var(--font-family-title, 'Arial', sans-serif);
    letter-spacing: 0.5px;
}

/* Mô tả nhỏ (Màu xám) */
.milano-feature-desc {
    font-size: 14px;
    color: #7A7A7A;
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
}


/* ==========================================================================
   RESPONSIVE CHO ĐIỆN THOẠI VÀ TABLET
   ========================================================================== */

/* Trên màn hình vừa / Tablet: Chuyển thành 2 hàng, mỗi hàng 2 box */
@media (max-width: 1200px) {
    .milano-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Trên điện thoại Mobile: Các box xếp chồng lên nhau thành 1 cột dọc */
@media (max-width: 768px) {
    .milano-features-section {
        padding: 40px 0;
    }

    .milano-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .milano-feature-item {
        padding: 30px 20px;
        /* Thu nhỏ padding trên mobile cho gọn */
    }
}

/* ==========================================================================
   POPULAR PICKS (BEST SELLING) SECTION
   ========================================================================== */

.milano-best-selling-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}

/* 1. Header (Tiêu đề) */
.milano-best-selling-section .milano-section-header {
    margin-bottom: 40px;
}

.milano-best-selling-section .milano-heading {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 10px 0;
    font-family: var(--font-family-title, 'Arial', sans-serif);
    letter-spacing: 0.5px;
}

.milano-best-selling-section .milano-subheading {
    color: #7A7A7A;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

/* Nhường chỗ cho 2 mũi tên 2 bên */
.milano-best-selling-section .page-custom-wrapper {
    padding: 0 40px;
}

/* 2. Product Card Toàn cục */
.milano-product-card {
    background: #fff;
    position: relative;
    transition: all 0.3s ease;
}

/* 3. Khu vực Hình Ảnh */
.milano-img-wrapper {
    position: relative;
    overflow: hidden;
    /* Quan trọng: để giấu các nút khi chưa hover */
    margin-bottom: 20px;
    background-color: #F9F9F9;
    /* Nền xám cực nhạt làm nổi bật ảnh sản phẩm */
    border-radius: 4px;
}

.milano-img-wrapper .product-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* Xóa nền trắng của ảnh sản phẩm (nếu có) hòa vào nền xám */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover phóng to ảnh */
.milano-product-card:hover .product-img {
    transform: scale(1.08);
}

/* Badge Giảm Giá (Góc trái trên) */
.milano-badge-sale {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #FF5722;
    /* Màu cam đặc trưng */
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    z-index: 5;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

/* 4. Icon Nổi (Dọc bên phải) - Slide in từ phải sang */
.milano-floating-icons {
    position: absolute;
    top: 15px;
    right: -50px;
    /* Giấu ra ngoài khung ảnh */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
    opacity: 0;
    transition: all 0.3s ease;
}

.milano-product-card:hover .milano-floating-icons {
    right: 15px;
    /* Trượt vào trong */
    opacity: 1;
}

.milano-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #111111;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.milano-icon-btn .material-icons {
    font-size: 18px;
}

.milano-icon-btn:hover {
    background-color: #111111;
    color: #FFFFFF;
    transform: scale(1.1);
}

/* 5. Nút Add To Cart (Đáy ảnh) - Slide up từ dưới lên */
.milano-atc-wrap {
    position: absolute;
    bottom: -50px;
    /* Giấu chìm xuống dưới */
    left: 0;
    width: 100%;
    z-index: 5;
    opacity: 0;
    transition: all 0.3s ease;
}

.milano-product-card:hover .milano-atc-wrap {
    bottom: 0;
    /* Trượt lên bám sát đáy ảnh */
    opacity: 1;
}

.milano-atc-btn {
    display: block;
    width: 100%;
    background-color: #111111;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.milano-atc-btn:hover {
    background-color: var(--color-accent-hover, #00d2b5);
    /* Đổi sang màu Cyan khi hover */
    color: #111111;
    /* Đổi màu chữ nếu cần */
}

/* 6. Thông tin sản phẩm (Căn giữa) */
.milano-info {
    padding: 0 10px;
}

/* Tên sản phẩm */
.milano-name {
    font-size: 15px;
    font-weight: 500;
    color: #111111;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.milano-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: var(--font-family-title-small);
}

.milano-name a:hover {
    color: #FF5722;
    /* Hover đổi màu cam */
}

/* Đánh giá sao (Màu vàng) */
.milano-rating {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.milano-rating .star-rating {
    font-size: 13px;
    color: #F59E0B;
    /* Màu vàng cam chuẩn cho ngôi sao */
}

/* Giá tiền */
.milano-price {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.milano-price del,
.milano-price del span {
    color: #9CA3AF;
    /* Giá cũ màu xám */
    font-weight: 400;
    font-size: 14px;
}

.milano-price ins,
.milano-price ins span,
.milano-price>span {
    color: #EF4444;
    /* Giá mới màu đỏ */
    text-decoration: none;
}

/* 7. Mũi Tên Slider (Nằm 2 bên ngoài cùng) */
.milano-best-selling-section .milano-nav-prev,
.milano-best-selling-section .milano-nav-next {
    position: absolute;
    top: 50%;
    /* Canh giữa slider */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    color: #111111;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    margin: 0;
    transition: color 0.3s ease;
}

.milano-best-selling-section .milano-nav-prev {
    left: -10px;
}

.milano-best-selling-section .milano-nav-next {
    right: -10px;
}

.milano-best-selling-section .milano-nav-prev::after,
.milano-best-selling-section .milano-nav-next::after {
    display: none;
    /* Ẩn icon mặc định xấu xí của swiper */
}

.milano-best-selling-section .milano-nav-prev .material-icons,
.milano-best-selling-section .milano-nav-next .material-icons {
    font-size: 32px;
    /* Mũi tên to rõ nét */
}

.milano-best-selling-section .milano-nav-prev:hover,
.milano-best-selling-section .milano-nav-next:hover {
    color: #FF5722;
    /* Hover mũi tên ra màu cam */
}

/* ==========================================================================
   RESPONSIVE CHO ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 992px) {

    /* Thu hẹp lề, ẩn mũi tên vì ipad/mobile vuốt tay tiện hơn */
    .milano-best-selling-section .page-custom-wrapper {
        padding: 0 15px;
    }

    .milano-best-selling-section .milano-nav-prev,
    .milano-best-selling-section .milano-nav-next {
        display: none;
    }
}

@media (max-width: 768px) {

    /* Trên điện thoại không có chuột để hover, nên ép các nút hiện sẵn luôn */
    .milano-floating-icons {
        right: 10px;
        top: 10px;
        opacity: 1;
    }

    .milano-atc-wrap {
        bottom: 0;
        opacity: 1;
    }

    .milano-icon-btn {
        width: 32px;
        height: 32px;
    }

    .milano-icon-btn .material-icons {
        font-size: 16px;
    }

    .milano-atc-btn {
        padding: 10px 0;
        font-size: 12px;
    }
}

/* ==========================================================================
   LATEST BLOG POSTS SECTION
   ========================================================================== */

.milano-blog-slider-section {
    padding: 80px 0;
    background-color: #FFFFFF;
}

/* 1. Header (Tiêu đề) */
.milano-blog-slider-section .milano-section-header {
    margin-bottom: 50px;
}

.milano-blog-slider-section .milano-heading {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 10px 0;
    font-family: var(--font-family-title, 'Arial', sans-serif);
    letter-spacing: 0.5px;
}

.milano-blog-slider-section .milano-subheading {
    color: #7A7A7A;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

/* 2. Thẻ Blog (Card) */
.milano-blog-card-small {
    background: #FFFFFF;
    transition: transform 0.3s ease;
    height: 100%;
}

/* Bọc toàn bộ card vào link để click đâu cũng được */
.milano-blog-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* Hiệu ứng nổi lên nhẹ khi hover vào card */
.milano-blog-card-small:hover {
    transform: translateY(-5px);
}

/* 3. Khung Ảnh Bài Viết */
.milano-blog-img-box {
    position: relative;
    overflow: hidden;
    /* Quan trọng để ảnh không trào ra ngoài khi phóng to */
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #F3F4F6;
    aspect-ratio: 4 / 3;
    /* Giữ tỷ lệ ảnh vuông vức đẹp mắt */
}

.milano-blog-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.milano-blog-card-small:hover .milano-blog-img-box img {
    transform: scale(1.08);
    /* Zoom in ảnh */
}

/* Badge Danh Mục (Nằm đè lên góc trái ảnh) */
.milano-cat-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #111111;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 2px;
    z-index: 2;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

/* Hover thẻ thì badge đổi màu cam cho đồng bộ */
.milano-blog-card-small:hover .milano-cat-badge {
    background-color: #FF5722;
}

/* 4. Thông tin Text bên dưới */
.milano-blog-info {
    padding: 0 10px;
    text-align: left;
}

/* Ngày tháng */
.milano-meta-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9CA3AF;
    /* Màu xám nhạt */
    margin-bottom: 12px;
    font-weight: 400;
}

.milano-meta-date .material-icons {
    font-size: 14px;
}

/* Tiêu đề Bài viết */
.milano-post-title {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 15px 0;
    line-height: 1.4;
    transition: color 0.3s ease;

    /* Cắt chữ nếu tiêu đề quá dài (Giới hạn 2 dòng) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.milano-blog-card-small:hover .milano-post-title {
    color: #FF5722;
    /* Hover đổi màu cam */
}

/* 5. Nút Read More */
.milano-read-btn {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111111;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 3px;
    transition: color 0.3s ease;
}

/* Tạo đường gạch chân vô hình bên dưới chữ Read More */
.milano-read-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    /* Ban đầu chiều dài bằng 0 */
    height: 2px;
    background-color: #FF5722;
    transition: width 0.3s ease;
}

/* Khi hover, chữ đổi màu cam và đường gạch chân chạy ra 100% */
.milano-blog-card-small:hover .milano-read-btn {
    color: #FF5722;
}

.milano-blog-card-small:hover .milano-read-btn::after {
    width: 100%;
}

/* 6. Pagination (Dấu chấm chuyển slide của Swiper) */
.milano-blog-slider-section .blog-pagination {
    position: relative;
    margin-top: 40px;
    /* Cách xa các thẻ bài viết */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.milano-blog-slider-section .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #D1D5DB;
    /* Chấm xám nhạt */
    opacity: 1;
    border-radius: 50%;
    margin: 0 !important;
    transition: all 0.3s ease;
}

/* Chấm nào đang Active sẽ kéo dài ra thành viên thuốc màu đen */
.milano-blog-slider-section .swiper-pagination-bullet-active {
    width: 24px;
    background: #111111;
    border-radius: 4px;
}


/* ==========================================================================
   RESPONSIVE CHO ĐIỆN THOẠI VÀ TABLET
   ========================================================================== */
@media (max-width: 992px) {
    .milano-blog-slider-section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .milano-blog-slider-section {
        padding: 40px 0;
    }

    .milano-blog-slider-section .milano-heading {
        font-size: 24px;
    }

    .milano-post-title {
        font-size: 16px;
        /* Chữ nhỏ lại trên điện thoại */
    }
}

/* ==========================================================================
   ABOUT US PAGE STYLES (MILANO STYLE)
   ========================================================================== */

/* 1. Hero Section */
.milano-about-hero {
    padding: 100px 0 60px;
    background-color: #FFFFFF;
}

.milano-small-tag {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #FF5722;
    /* Màu cam điểm nhấn */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.milano-hero-title {
    font-family: var(--font-family-title, sans-serif);
    font-size: clamp(36px, 5vw, 64px);
    /* Chữ cực to ấn tượng */
    font-weight: 800;
    color: #111111;
    line-height: 1.1;
    margin-bottom: 30px;
}

.milano-hero-desc {
    font-size: 18px;
    color: #555555;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.8;
    font-weight: 300;
}

.milano-divider-line {
    width: 80px;
    height: 4px;
    background-color: #111111;
    /* Gạch chân đen dày */
    margin: 0 auto;
}

/* 2. Story Section */
.milano-story-section {
    padding: 100px 0;
    background-color: #F9F9F9;
    /* Nền xám rất nhạt */
}

.milano-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    /* Khoảng cách rộng thoáng */
    align-items: center;
}

/* Cột ảnh */
.story-img-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    /* Bóng đổ mềm */
}

.story-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-img-wrap:hover img {
    transform: scale(1.1);
    /* Zoom ảnh mượt mà */
}

/* Cột nội dung */
.milano-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 30px;
    font-family: var(--font-family-title, sans-serif);
}

.story-content p {
    font-size: 16px;
    color: #666666;
    margin-bottom: 25px;
    line-height: 1.8;
}

.milano-signature {
    font-family: 'Brush Script MT', cursive;
    /* Font chữ ký */
    font-size: 28px;
    color: #111111;
    margin-top: 30px;
}


/* 3. Core Values (4 Cột) */
.milano-values-section {
    padding: 100px 0;
    background-color: #FFFFFF;
}

.milano-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.milano-value-item {
    text-align: center;
    padding: 40px 20px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.milano-value-item:hover {
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Nổi lên khi hover */
    transform: translateY(-10px);
}

.value-icon {
    width: 70px;
    height: 70px;
    background-color: #FFF0E6;
    /* Nền cam rất nhạt */
    color: #FF5722;
    /* Icon cam */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    transition: background-color 0.3s ease;
}

.milano-value-item:hover .value-icon {
    background-color: #FF5722;
    color: #FFFFFF;
    /* Đổi màu khi hover box */
}

.value-icon .material-icons {
    font-size: 32px;
}

.value-title {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.value-desc {
    font-size: 14px;
    color: #777777;
    line-height: 1.6;
}


/* 4. Contact Info Box (Hộp Đen Sang Trọng) */
.milano-contact-section {
    padding-bottom: 100px;
}

.milano-contact-box {
    background-color: #111111;
    /* Đen tuyền */
    color: #FFFFFF;
    border-radius: 16px;
    padding: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* Cột trái */
.contact-heading {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.contact-desc {
    font-size: 16px;
    color: #CCCCCC;
    margin-bottom: 40px;
    line-height: 1.8;
}

.btn-contact-white {
    display: inline-block;
    padding: 15px 40px;
    background-color: #FFFFFF;
    color: #111111;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-contact-white:hover {
    background-color: #FF5722;
    /* Hover đổi màu cam */
    color: #FFFFFF;
}

/* Cột phải */
.contact-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Trắng trong suốt */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF5722;
    /* Icon cam nổi bật trên nền đen */
}

.contact-detail strong {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.contact-detail span {
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
}


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

    .milano-story-grid,
    .milano-contact-box {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .milano-values-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Tablet 2 cột */
    }

    .milano-contact-box {
        padding: 50px;
    }
}

@media (max-width: 576px) {
    .milano-hero-title {
        font-size: 32px;
    }

    .milano-values-grid {
        grid-template-columns: 1fr;
        /* Mobile 1 cột */
    }

    .milano-contact-box {
        padding: 30px;
    }

    .contact-heading {
        font-size: 32px;
    }

    .story-img-wrap {
        margin-bottom: 20px;
    }
}