/* ==========================================================================
   FIXCSSALL.CSS - Custom Overrides & Responsive Fixes (United Vision Theme)
   File riêng biệt chuyên dùng cho các tùy chỉnh tùy biến và responsive,
   giúp không can thiệp hay ghi đè làm mất style gốc của style.css.
   ========================================================================== */

/* 1. Global Container & Layout Customizations */
@media (max-width: 991px) {
    .container {
        padding: 0 8px;
    }
}

/* 2. Custom Mobile & Tablet Overrides */
@media (max-width: 768px) {
    /* Đảm bảo khoảng cách và typography chuẩn trên mobile */
    .section-title {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   3. Hotspot Popup Anti-Clipping & Full Click Visibility Fix
   ========================================================================== */
.hotspot-slider-wrapper {
    /* Keep the off-screen carousel slides inside the visible frame. */
    overflow: hidden !important;
    background: #ffffff !important;
}

.hotspot-container {
    overflow: visible !important;
}

.hotspot-dot {
    z-index: 50 !important;
}

/* Popup mặc định hiển thị HƯỚNG LÊN TRÊN (bottom: calc(100% + 14px)) để không bao giờ bị tràn đáy ảnh */
.hotspot-popup {
    position: absolute !important;
    bottom: calc(100% + 14px) !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    width: 240px !important;
    min-width: 220px !important;
    max-width: 250px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
    z-index: 100 !important;
    pointer-events: none !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25) !important;
    text-align: center !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Mũi tên trỏ xuống dưới vào điểm dot */
.hotspot-popup::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 7px 7px 0 7px !important;
    border-style: solid !important;
    border-color: #ffffff transparent transparent transparent !important;
    display: block !important;
}

/* Hiển thị khi Hover hoặc khi Click (Active) */
.hotspot-dot:hover .hotspot-popup,
.hotspot-dot.active .hotspot-popup {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* Với các điểm ở phía trên cùng (pos-bottom hoặc top < 45%), popup mở HƯỚNG XUỐNG DƯỚI */
.hotspot-dot.pos-bottom .hotspot-popup {
    top: calc(100% + 14px) !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-8px) !important;
}

.hotspot-dot.pos-bottom:hover .hotspot-popup,
.hotspot-dot.pos-bottom.active .hotspot-popup {
    transform: translateX(-50%) translateY(0) !important;
}

.hotspot-dot.pos-bottom .hotspot-popup::after {
    top: -7px !important;
    bottom: auto !important;
    border-width: 0 7px 7px 7px !important;
    border-color: transparent transparent #ffffff transparent !important;
}

/* Ảnh sản phẩm trong Popup (Không nền trắng / Trong suốt) */
.hotspot-popup .hp-img {
    width: 100% !important;
    height: 110px !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    mix-blend-mode: multiply !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Tiêu đề sản phẩm trong Popup */
.hotspot-popup .hp-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Nút "Xem chi tiết" dễ bấm, rõ ràng */
.hotspot-popup .hp-link {
    display: inline-block !important;
    margin-top: 4px !important;
    padding: 7px 18px !important;
    background: var(--primary-color, #EFA688) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(239, 166, 136, 0.3) !important;
}

.hotspot-popup .hp-link:hover {
    background: #e09475 !important;
    color: #ffffff !important;
    transform: scale(1.03) !important;
}

@media (max-width: 768px) {
    .hotspot-popup {
        width: 210px !important;
        min-width: 190px !important;
        max-width: 220px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }
    .hotspot-popup .hp-img {
        height: 85px !important;
    }
    .hotspot-popup .hp-title {
        font-size: 0.82rem !important;
        margin-bottom: 6px !important;
    }
    .hotspot-popup .hp-link {
        padding: 5px 14px !important;
        font-size: 0.72rem !important;
    }
}

/* Nút bấm chuyển slide Trái / Phải cho Không Gian Bếp Mẫu */
.hotspot-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #222222 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    outline: none !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.hotspot-arrow.hotspot-prev {
    left: 20px !important;
}

.hotspot-arrow.hotspot-next {
    right: 20px !important;
}

.hotspot-arrow:hover {
    background: var(--primary-color, #c89a58) !important;
    color: #ffffff !important;
    border-color: var(--primary-color, #c89a58) !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3) !important;
}

.hotspot-arrow:active {
    transform: translateY(-50%) scale(0.95) !important;
}

@media (max-width: 768px) {
    .hotspot-arrow {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
    .hotspot-arrow.hotspot-prev {
        left: 10px !important;
    }
    .hotspot-arrow.hotspot-next {
        right: 10px !important;
    }
}

/* ==========================================================================
   4. Category Showcase (Danh Mục Nổi Bật) & Homepage Section Spacing Fix
   ========================================================================== */
.category-masonry-section,
.featured-categories {
    padding: 55px 0 50px !important;
    background-color: #f8f9fa !important;
    margin-top: 0 !important;
    position: relative !important;
}

.category-masonry-section .section-heading-block,
.featured-categories .section-header {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    padding: 0 15px !important;
}

.category-masonry-section .section-heading-block .section-title,
.featured-categories .section-title {
    font-size: 2.2rem !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.25 !important;
}

.category-masonry-section .section-heading-block p,
.featured-categories .section-subtitle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    max-width: 650px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #666 !important;
    font-size: 1rem !important;
}

.category-masonry-section .cat-masonry-grid,
.featured-categories .cat-masonry-grid {
    margin-top: 25px !important;
}

@media (max-width: 991px) {
    /* Căn đều trên dưới chuẩn đẹp, không bị trống quá nhiều trên Mobile & Tablet */
    .category-masonry-section,
    .featured-categories {
        padding: 38px 0 35px !important;
        margin-top: 0 !important;
    }
    
    .category-masonry-section .section-heading-block,
    .featured-categories .section-header {
        margin-bottom: 22px !important;
        padding: 0 12px !important;
    }

    .category-masonry-section .section-heading-block .section-title,
    .featured-categories .section-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .category-masonry-section .section-heading-block p,
    .featured-categories .section-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
        color: #666 !important;
    }

    .category-masonry-section .cat-masonry-grid,
    .featured-categories .cat-masonry-grid {
        margin-top: 18px !important;
        gap: 14px !important;
    }

    /* Các section khác trên trang chủ */
    .products-section,
    .kitchen-hotspot,
    .masterclass-section,
    .services-section,
    .portfolio-section,
    .consultation-section {
        padding: 45px 0 !important;
    }
}

@media (max-width: 576px) {
    .category-masonry-section,
    .featured-categories {
        padding: 32px 0 28px !important;
    }

    .category-masonry-section .section-heading-block,
    .featured-categories .section-header {
        margin-bottom: 18px !important;
        padding: 0 10px !important;
    }

    .category-masonry-section .section-heading-block .section-title,
    .featured-categories .section-title {
        font-size: 1.6rem !important;
        margin-bottom: 6px !important;
    }

    .category-masonry-section .section-heading-block p,
    .featured-categories .section-subtitle {
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
        padding: 0 4px !important;
    }

    .category-masonry-section .cat-masonry-grid,
    .featured-categories .cat-masonry-grid {
        margin-top: 15px !important;
    }
}

/* Hotspot mobile positions are independent from the desktop coordinates. */
@media (max-width: 768px) {
    .hotspot-section .hotspot-dot {
        top: var(--hotspot-mobile-top) !important;
        left: var(--hotspot-mobile-left) !important;
    }
}

/* Optional uploaded logo for the Bento introduction card. */
.about-bento .bento-brand-image {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 70px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 8px;
}

.about-bento .bento-brand-image[hidden] {
    display: none !important;
}

.about-bento .bento-logo-text[hidden] {
    display: none !important;
}

/* Optional uploaded demo images for the four Bento positions. */
.about-bento .bento-icon .bento-demo-image {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.about-bento .bento-icon .bento-demo-image[hidden] {
    display: none !important;
}

/* Keep the right-hand statistic image aligned with the right-aligned value. */
.about-bento .bento-right-bottom .bento-card > div:last-child .bento-icon {
    display: flex !important;
    justify-content: flex-end !important;
}

.about-bento .bento-right-bottom .bento-card > div:last-child .bento-demo-image {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ========================================================================== 
   5. Bento About Section Mobile Responsive (Chuyển sang 1 cột & Spacing đẹp)
   ========================================================================== */
@media (max-width: 991px) {
    .about-bento {
        padding: 50px 0 !important;
    }

    .bento-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .bento-card {
        padding: 28px 20px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }

    .bento-left {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
    }

    .bento-logo {
        max-width: 100% !important;
        margin-bottom: 25px !important;
    }

    .bento-logo-text {
        font-size: 2.1rem !important;
    }

    .bento-left h2 {
        font-size: 3.2rem !important;
        margin-bottom: 12px !important;
    }

    .bento-desc {
        font-size: 0.95rem !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }

    .bento-img-row {
        gap: 10px !important;
        margin-bottom: 25px !important;
        justify-content: flex-start !important;
    }

    .bento-img-row img {
        width: 75px !important;
        height: 140px !important;
        border-radius: 6px !important;
    }

    .bento-right-top {
        grid-column: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .bento-right-bottom {
        grid-column: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .bento-right-bottom .bento-card {
        grid-column: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    .bento-right-bottom .bento-card > div:last-child {
        text-align: left !important;
        width: 100% !important;
        padding-top: 18px !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    .about-bento .bento-right-bottom .bento-card > div:last-child .bento-icon {
        justify-content: flex-start !important;
    }

    .about-bento .bento-right-bottom .bento-card > div:last-child .bento-demo-image {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .bento-card h3 {
        font-size: 1.6rem !important;
        margin-bottom: 10px !important;
    }

    .bento-card p {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }

    .bento-icon {
        font-size: 1.6rem !important;
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   6. Product Grids 2 Items / Row on Mobile (Tất cả sản phẩm hiển thị 2 cột)
   ========================================================================== */
@media (max-width: 991px) {
    /* Lưới sản phẩm 2 cột cho trang Collection, Bakery, Sidekicks & Showcase */
    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2,
    .hs-sidekick-wrapper,
    .sidekicks-grid,
    .products-grid,
    #collection-product-grid,
    .category-main .grid-4 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 10px !important;
    }

    /* Thẻ sản phẩm chuẩn compact 2 cột */
    .product-card,
    .cat-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        border: 1px solid #EAEAEA !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        text-decoration: none !important;
        height: 100% !important;
    }

    /* Khung ảnh sản phẩm trong thẻ 2 cột */
    .product-card .img-wrapper,
    .cat-card .cat-card-img {
        height: 150px !important;
        min-height: auto !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
        background: #ffffff !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .product-card .img-wrapper img,
    .cat-card .cat-card-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        padding: 0 !important;
    }

    /* Thông tin chữ & SKU */
    .product-card .sku,
    .cat-card .cat-card-info p {
        font-size: 0.72rem !important;
        color: #999 !important;
        margin-bottom: 4px !important;
        text-transform: uppercase !important;
    }

    /* Tiêu đề sản phẩm 2 dòng */
    .product-card h4,
    .cat-card .cat-card-info h4,
    .cat-card h4 {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: var(--dark-bg, #222) !important;
        line-height: 1.35 !important;
        margin: 0 0 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: 36px !important;
    }

    .cat-card-info {
        padding: 0 !important;
    }

    .cat-card-price {
        font-size: 0.88rem !important;
        margin-top: auto !important;
    }

    /* Khối Hero Sidekick: Thẻ Hero lớn ở trên + 4 thẻ nhỏ xếp 2x2 ở dưới */
    .hero-sidekick-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .hs-hero-card {
        padding: 22px 18px !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    .hs-hero-img-wrapper {
        height: 190px !important;
        margin-bottom: 12px !important;
    }

    .hs-hero-img-wrapper img {
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .hs-hero-content h3 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }

    .hs-hero-content .desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   7. Interactive Services Tabs Mobile Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .services-section {
        padding: 50px 0 !important;
    }

    .services-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .srv-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .srv-list .section-title {
        font-size: 1.85rem !important;
        margin-bottom: 8px !important;
    }

    .srv-item {
        font-size: 1.15rem !important;
        font-family: var(--font-main) !important;
        color: #555 !important;
        padding: 16px 18px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        border: 1px solid #EAEAEA !important;
        margin: 0 !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        text-decoration: none !important;
    }

    .srv-item::before {
        display: none !important;
    }

    .srv-item:hover,
    .srv-item.active {
        color: #1a1a1a !important;
        border-color: var(--primary-color, #EFA688) !important;
        background: #FFFDFC !important;
        box-shadow: 0 4px 15px rgba(239, 166, 136, 0.18) !important;
        padding-left: 18px !important;
        transform: translateX(3px) !important;
    }

    .srv-item strong {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: var(--dark-bg, #222) !important;
        line-height: 1.35 !important;
        display: block !important;
    }

    .srv-item.active strong {
        color: var(--primary-dark, #d68b66) !important;
    }

    .srv-item p {
        font-size: 0.85rem !important;
        color: #777 !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        font-weight: 400 !important;
    }

    .srv-image-container {
        width: 100% !important;
        height: 250px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    }

    .srv-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.4s ease, transform 0.4s ease !important;
        transform: scale(1.05) !important;
        display: block !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }

    .srv-img.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) !important;
        z-index: 2 !important;
    }

    .srv-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Base Styles for Section 10 Services Interactive Tabs */
.srv-image-container {
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.srv-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.05);
    display: block;
    cursor: pointer;
    text-decoration: none;
}
.srv-img.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    z-index: 2 !important;
}
.srv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   8. Dedicated Isolated Mobile Drawer Menu (.uv- prefix)
   Hoàn toàn độc lập, không tác động đến bất kỳ class nào của Desktop Header
   ========================================================================== */

/* Desktop: Ẩn hoàn toàn tất cả thành phần Drawer trên màn hình lớn */
.uv-drawer-overlay,
.uv-mobile-drawer {
    display: none !important;
}

/* Mobile: Chỉ kích hoạt trên màn hình <= 991px */
@media (max-width: 991px) {
    /* Ẩn thanh nav desktop cũ trên mobile để nhường chỗ cho Drawer mới */
    .header .nav-wrapper {
        display: none !important;
    }

    /* 1. Lớp phủ làm mờ màn hình */
    .uv-drawer-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .uv-drawer-overlay.uv-active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 2. Hộp Drawer trượt từ bên phải */
    .uv-mobile-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: -360px !important;
        width: 330px !important;
        max-width: 88vw !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18) !important;
        padding: 20px 20px 30px !important;
        transition: right 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .uv-mobile-drawer.uv-open {
        right: 0 !important;
    }

    /* Header trong Drawer */
    .uv-drawer-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .uv-drawer-logo img {
        max-height: 36px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .uv-drawer-close-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f5f5f7 !important;
        border: none !important;
        color: #444 !important;
        font-size: 1.05rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
    }

    .uv-drawer-close-btn:hover {
        background: #e8e8ea !important;
        transform: rotate(90deg) !important;
    }

    /* Khung tìm kiếm */
    .uv-drawer-search-wrap {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .uv-drawer-search-form {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        background: #f7f8fa !important;
        border: 1px solid #EAEAEA !important;
        border-radius: 50px !important;
        padding: 9px 18px !important;
        box-sizing: border-box !important;
    }

    .uv-drawer-search-form input {
        border: none !important;
        background: transparent !important;
        color: #222 !important;
        font-size: 0.9rem !important;
        font-family: var(--font-main) !important;
        outline: none !important;
        flex: 1 !important;
    }

    .uv-drawer-search-form input::placeholder {
        color: #999 !important;
    }

    .uv-drawer-search-form button {
        border: none !important;
        background: transparent !important;
        color: var(--primary-color, #EFA688) !important;
        font-size: 1rem !important;
        cursor: pointer !important;
    }

    /* Danh sách menu */
    .uv-drawer-nav {
        width: 100% !important;
    }

    .uv-nav-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .uv-nav-item {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #f2f3f5 !important;
        margin: 0 !important;
    }

    .uv-nav-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 4px !important;
        box-sizing: border-box !important;
    }

    .uv-nav-link {
        color: #222 !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        text-decoration: none !important;
        flex: 1 !important;
        transition: color 0.2s ease !important;
        font-family: var(--font-main) !important;
    }

    .uv-nav-link:hover,
    .uv-nav-link.active,
    .uv-nav-item.is-current > .uv-nav-row .uv-nav-link,
    .uv-nav-item.active > .uv-nav-row .uv-nav-link,
    .uv-nav-item.uv-active > .uv-nav-row .uv-nav-link {
        color: var(--primary-color, #ED9D77) !important;
    }

    /* Nút mũi tên mở Accordion */
    .uv-toggle-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: #f8f9fa !important;
        border: 1px solid #EAEAEA !important;
        color: #777 !important;
        font-size: 0.75rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        flex-shrink: 0 !important;
    }

    .uv-nav-item.uv-active > .uv-nav-row .uv-toggle-btn {
        transform: rotate(180deg) !important;
        background: #FFF3EC !important;
        color: var(--primary-color, #EFA688) !important;
        border-color: var(--primary-color, #EFA688) !important;
    }

    /* Khung Menu Con Accordion */
    .uv-submenu {
        display: none !important;
        width: 100% !important;
        background: #FFF9F6 !important;
        border-radius: 10px !important;
        padding: 14px 16px !important;
        margin: 4px 0 12px !important;
        border-left: 3px solid var(--primary-color, #EFA688) !important;
        box-sizing: border-box !important;
    }

    .uv-nav-item.uv-active > .uv-submenu {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        animation: uvFadeIn 0.25s ease-in-out !important;
    }

    .uv-sub-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .uv-sub-head {
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid rgba(239, 166, 136, 0.25) !important;
    }

    .uv-sub-head a {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        color: var(--dark-bg, #222) !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    .uv-sub-links {
        list-style: none !important;
        padding: 0 0 0 6px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .uv-sub-links li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .uv-sub-links a {
        font-size: 0.88rem !important;
        color: #555 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        padding: 4px 0 !important;
        display: block !important;
        transition: all 0.2s ease !important;
    }

    .uv-sub-links a:hover {
        color: var(--primary-color, #EFA688) !important;
        transform: translateX(4px) !important;
    }

    /* Footer Drawer CTA */
    .uv-drawer-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 25px !important;
        padding-top: 18px !important;
        border-top: 1px solid #f0f0f0 !important;
        width: 100% !important;
    }

    .uv-btn-hotline {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 11px 20px !important;
        background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 0.92rem !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 14px rgba(239, 166, 136, 0.35) !important;
        transition: all 0.25s ease !important;
    }

    .uv-drawer-actions-row {
        display: flex !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .uv-action-btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 9px !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        color: #444 !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border: 1px solid #eaeaea !important;
        transition: all 0.2s ease !important;
    }
}

@keyframes uvFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   9. Collection Page Professional Responsive Styling
   ========================================================================== */

@media (max-width: 991px) {

/* Breadcrumb Styling */
.breadcrumb {
    padding: 12px 0 20px;
    font-size: 0.88rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--primary-color, #EFA688);
}

.breadcrumb .divider {
    color: #ccc;
    font-size: 0.8rem;
}

/* Category Layout */
.category-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 80px;
}

/* Sidebar Styling */
.sidebar-box {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    padding: 24px 20px;
    position: sticky;
    top: 90px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.sidebar-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #f2f3f5;
    margin-bottom: 12px;
}

.sidebar-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-sublist li a {
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sidebar-sublist li a:hover,
.sidebar-sublist li a.active {
    color: var(--primary-color, #EFA688);
    background: #FFF7F3;
    font-weight: 600;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.filter-select {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #333;
    background: #fdfdfd;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.filter-select:focus {
    border-color: var(--primary-color, #EFA688);
}

.filter-right {
    display: flex;
    gap: 6px;
}

.view-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #EAEAEA;
    background: #f8f9fa;
    color: #666;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover {
    background: #f0f0f0;
    color: #222;
}

.view-btn.active {
    background: var(--primary-color, #EFA688);
    color: #ffffff;
    border-color: var(--primary-color, #EFA688);
    box-shadow: 0 2px 8px rgba(239, 166, 136, 0.35);
}

/* Product Card Grid */
#collection-product-grid.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px 20px;
}

.cat-card {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%;
    box-sizing: border-box;
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    border-color: var(--primary-color, #EFA688);
}

.cat-card-img {
    height: 170px;
    background: #fcfcfc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cat-card-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.cat-card-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cat-card-info p {
    font-size: 0.75rem;
    color: #999;
    margin: 0 0 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.cat-card-info h4,
.cat-card h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.cat-card-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color, #EFA688);
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* List View Mode */
#collection-product-grid.view-list-mode {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#collection-product-grid.view-list-mode .cat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
}

#collection-product-grid.view-list-mode .cat-card-img {
    width: 140px;
    height: 120px;
    flex-shrink: 0;
    margin-bottom: 0;
}

#collection-product-grid.view-list-mode .cat-card-info {
    flex: 1;
}

#collection-product-grid.view-list-mode .cat-card-info h4 {
    font-size: 1.1rem;
    min-height: auto;
    -webkit-line-clamp: 1;
}

/* Pagination Wrapper */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 45px 0 20px;
    width: 100%;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #EAEAEA;
    color: #555;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-num:hover {
    border-color: var(--primary-color, #EFA688);
    color: var(--primary-color, #EFA688);
}

.page-num.active {
    background: var(--primary-color, #EFA688) !important;
    border-color: var(--primary-color, #EFA688) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 166, 136, 0.35);
}

}

/* Responsive Collection Page on Tablet & Mobile */
@media (max-width: 991px) {
    .category-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Đẩy phần danh mục xuống dưới danh sách sản phẩm & bài viết blog trên mobile theo yêu cầu */
    .collection-page-main .category-layout,
    .template-collection .category-layout,
    .blog-page-main .category-layout,
    .template-blog .category-layout,
    body.template-blog .category-layout {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 45px !important;
    }

    .collection-page-main .category-layout .category-main,
    .template-collection .category-layout .category-main,
    .blog-page-main .category-layout .category-main,
    .template-blog .category-layout .category-main,
    body.template-blog .category-layout .category-main {
        order: 1 !important;
        width: 100% !important;
    }

    .collection-page-main .category-layout .sidebar-accordion,
    .template-collection .category-layout .sidebar-accordion,
    .collection-page-main .category-layout .sidebar-box,
    .template-collection .category-layout .sidebar-box,
    .blog-page-main .category-layout .sidebar-accordion,
    .template-blog .category-layout .sidebar-accordion,
    body.template-blog .category-layout .sidebar-accordion {
        order: 2 !important;
        width: 100% !important;
        margin-top: 25px !important;
        margin-bottom: 30px !important;
    }

    /* Sidebar transforms into a compact horizontal tag cloud / pill list on mobile */
    .sidebar-box {
        position: relative !important;
        top: 0 !important;
        padding: 14px !important;
        margin-bottom: 15px !important;
        box-shadow: none !important;
    }

    .sidebar-group-title {
        font-size: 0.88rem !important;
        padding-bottom: 6px !important;
        margin-bottom: 8px !important;
    }

    .sidebar-sublist {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .sidebar-sublist li a {
        font-size: 0.8rem !important;
        padding: 5px 12px !important;
        border-radius: 50px !important;
        background: #f8f9fa !important;
        border: 1px solid #EAEAEA !important;
    }

    .sidebar-sublist li a.active {
        background: var(--primary-color, #EFA688) !important;
        color: #ffffff !important;
        border-color: var(--primary-color, #EFA688) !important;
    }

    /* Filter Toolbar on Mobile */
    .filter-bar {
        padding: 10px 14px !important;
        margin-bottom: 16px !important;
    }

    .filter-label {
        display: none !important;
    }

    .filter-select {
        font-size: 0.82rem !important;
        padding: 6px 12px !important;
    }

    /* Product Grid: 2 Items / Row on Mobile */
    #collection-product-grid.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }

    .cat-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }

    .cat-card-img {
        height: 135px !important;
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .cat-card-info p {
        font-size: 0.72rem !important;
    }

    .cat-card-info h4 {
        font-size: 0.85rem !important;
        min-height: 36px !important;
        margin-bottom: 4px !important;
    }

    .cat-card-price {
        font-size: 0.88rem !important;
    }

    /* List View on Mobile */
    #collection-product-grid.view-list-mode .cat-card {
        gap: 12px !important;
        padding: 10px !important;
    }

    #collection-product-grid.view-list-mode .cat-card-img {
        width: 100px !important;
        height: 95px !important;
    }

    #collection-product-grid.view-list-mode .cat-card-info h4 {
        font-size: 0.9rem !important;
    }

    /* Pagination on Mobile */
    .pagination-wrapper {
        margin: 30px 0 10px !important;
    }

    .page-num {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.88rem !important;
    }
}

/* ==========================================================================
   10. Product Detail Page Responsive Styling
   ========================================================================== */

@media (max-width: 991px) {

/* Product Page Main Container */
.product-page-main {
    background: var(--secondary-bg, #F3F5F5) !important;
    padding-top: 10px !important;
    padding-bottom: 50px !important;
}

.product-page-main .breadcrumb {
    padding: 12px 16px 16px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    font-size: 0.86rem !important;
    border-bottom: 1px solid #f2f3f5 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}

.product-page-main .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.product-page-main .breadcrumb a:hover {
    color: var(--primary-color, #EFA688) !important;
}

.product-page-main .breadcrumb .divider {
    color: #ccc !important;
    font-size: 0.75rem !important;
    margin: 0 4px !important;
}

.product-page-main .breadcrumb .current {
    color: var(--primary-color, #EFA688) !important;
    font-weight: 600 !important;
}

/* Product Top Section */
.product-top {
    margin-bottom: 35px;
}

.product-top .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Product Gallery (Desktop) */
.product-gallery.vertical-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: none;
    box-shadow: none;
}

.gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 75px;
    flex-shrink: 0;
    max-height: 440px;
    overflow-y: auto;
}

.thumb-item {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1.5px solid #EAEAEA;
    background: #fcfcfc;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--primary-color, #EFA688);
    box-shadow: 0 2px 8px rgba(239, 166, 136, 0.35);
}

.thumb-item img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.main-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
}

.main-image img {
    max-height: 400px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Product Info */
.product-info {
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0 0 12px;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.product-meta span {
    background: #f5f6f8;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #666;
}

.product-meta span strong {
    color: #222;
}

.product-short-desc {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 30px;
}

.product-short-desc strong {
    font-size: 0.92rem;
    color: #222;
    display: block;
    margin-bottom: 8px;
}

.product-short-desc ul {
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9rem;
    color: #555;
}

/* Variant Table */
.variant-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.variant-table.new-style {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.variant-table.new-style th {
    background: #f8f9fa;
    color: #444;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 12px;
    border-bottom: 1px solid #EAEAEA;
}

.variant-table.new-style td {
    padding: 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 0.92rem;
}

.variant-table.new-style tr:last-child td {
    border-bottom: none;
}

.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 50px;
    background: #fafafa;
    padding: 2px 4px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.qty-btn:hover {
    background: var(--primary-color, #EFA688);
    color: #fff;
}

.qty-val {
    width: 32px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
}

/* Product Action Buttons */
.product-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-add-to-cart {
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 166, 136, 0.35);
    transition: all 0.25s ease;
}

.btn-add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 166, 136, 0.45);
}

.btn-contact {
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid var(--primary-color, #EFA688);
    background: transparent;
    color: var(--primary-color, #EFA688);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-contact:hover {
    background: var(--primary-color, #EFA688);
    color: #fff;
}

/* Product Description & Specs */
.product-desc-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 40px;
    box-shadow: none;
}

.product-desc-section .section-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f2f3f5;
}

.toc-box {
    background: #FFF9F6;
    border-left: 4px solid var(--primary-color, #EFA688);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 25px;
}

.toc-box h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
}

.toc-box ul {
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toc-box a {
    color: #555;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.toc-box a:hover {
    color: var(--primary-color, #EFA688);
}

/* FAQ Section */
.faq-section {
    padding: 50px 0;
}

.faq-minimal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    transition: all 0.2s ease;
}

.accordion-item:hover {
    border-color: #d0d0d0;
}

.accordion-header {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.accordion-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    line-height: 1.4;
}

.accordion-icon {
    font-size: 0.85rem;
    color: #777;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.accordion-body {
    padding: 0 22px 18px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #555;
}

/* Commitments Section */
.commitment-section {
    padding: 40px 0;
}

.commitment-box {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: 30px 25px;
}

.commitment-box .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
}

.commit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 10px;
}

.commit-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.commit-text strong {
    display: block;
    font-size: 0.95rem;
    color: #222;
    margin-bottom: 4px;
}

.commit-text p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.45;
    margin: 0;
}

/* Mobile Product Page Responsive Styles */
    .product-page-main {
        padding-top: 8px !important;
        padding-bottom: 35px !important;
    }

    .product-page-main .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .product-page-main .breadcrumb {
        padding: 10px 16px 12px !important;
        margin-bottom: 15px !important;
        font-size: 0.82rem !important;
        gap: 5px !important;
        box-sizing: border-box !important;
    }

    .product-top .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Gallery Mobile: Main image top, thumbnails horizontal scroll bottom */
    .product-gallery.vertical-layout {
        flex-direction: column-reverse !important;
        padding: 14px !important;
        gap: 12px !important;
        border: none !important;
        box-shadow: none !important;
    }

    .gallery-thumbnails {
        flex-direction: row !important;
        width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 2px !important;
        gap: 8px !important;
    }

    .thumb-item {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
        padding: 4px !important;
        border-radius: 6px !important;
    }

    .main-image {
        min-height: auto !important;
        height: 280px !important;
        padding: 10px !important;
    }

    .main-image img {
        max-height: 100% !important;
    }

    /* Product Info Mobile */
    .product-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .product-meta {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .product-meta span {
        font-size: 0.78rem !important;
        padding: 4px 8px !important;
    }

    .product-short-desc {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
    }

    .product-short-desc ul {
        font-size: 0.85rem !important;
    }

    /* Modern Touch-Friendly Variant Cards on Mobile */
    .variant-table.new-style {
        display: block !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        margin-bottom: 16px !important;
    }

    .variant-table.new-style thead {
        display: none !important;
    }

    .variant-table.new-style tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .variant-table.new-style tr {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas: 
            "title sku"
            "price qty"
            "subtotal subtotal" !important;
        align-items: center !important;
        gap: 10px 12px !important;
        background: #ffffff !important;
        border: 1px solid #EAEAEA !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
    }

    .variant-table.new-style td {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    /* Variant Title (Top-Left) */
    .variant-table.new-style td:nth-child(1) {
        grid-area: title !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
    }

    /* Unit Price (Middle-Left) */
    .variant-table.new-style td:nth-child(2) {
        grid-area: price !important;
        font-size: 0.88rem !important;
        color: #555 !important;
    }
    .variant-table.new-style td:nth-child(2)::before {
        content: "Đơn giá: ";
        font-weight: 500;
        color: #888;
        margin-right: 4px;
    }

    /* Quantity Selector (Middle-Right) */
    .variant-table.new-style td:nth-child(3) {
        grid-area: qty !important;
        justify-content: flex-end !important;
    }

    /* Subtotal (Bottom) */
    .variant-table.new-style td:nth-child(4) {
        grid-area: subtotal !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 10px !important;
        border-top: 1px dashed #eee !important;
        margin-top: 4px !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }
    .variant-table.new-style td:nth-child(4)::before {
        content: "Tạm tính:";
        font-weight: 600;
        color: #666;
        font-size: 0.85rem;
    }
    .variant-table.new-style td:nth-child(4) .var-subtotal {
        color: var(--primary-color, #EFA688) !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }

    /* SKU (Top-Right) */
    .variant-table.new-style td:nth-child(5) {
        grid-area: sku !important;
        justify-content: flex-end !important;
        font-size: 0.75rem !important;
        color: #888 !important;
        text-transform: uppercase !important;
        background: #f5f6f8 !important;
        padding: 3px 8px !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
    }
    .variant-table.new-style td:nth-child(5)::before {
        content: "SKU: ";
        margin-right: 2px;
    }

    .qty-selector {
        padding: 3px 6px !important;
        background: #f8f9fa !important;
        border: 1px solid #EAEAEA !important;
        border-radius: 50px !important;
    }

    .qty-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.72rem !important;
    }

    .qty-val {
        width: 28px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    /* Action Buttons Mobile: Full width stacked */
    .product-actions {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    .btn-add-to-cart,
    .btn-contact {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 0.92rem !important;
    }

    /* Description Mobile */
    .product-desc-section {
        padding: 18px 14px !important;
        margin-top: 25px !important;
    }

    .product-desc-section .section-heading {
        font-size: 1.3rem !important;
        margin-bottom: 14px !important;
    }

    .toc-box {
        padding: 14px 16px !important;
        margin-bottom: 18px !important;
    }

    .desc-content {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* FAQ Mobile */
    .faq-section {
        padding: 30px 0 !important;
    }

    .accordion-header {
        padding: 14px 16px !important;
    }

    .accordion-header h4 {
        font-size: 0.9rem !important;
    }

    .accordion-body {
        padding: 0 16px 14px !important;
        font-size: 0.85rem !important;
    }

    /* Commitments Mobile */
    .commitment-section {
        padding: 25px 0 !important;
    }

    .commitment-box {
        padding: 18px 14px !important;
    }

    .commitment-box .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Related Products Mobile: 2 Items / Row */
    .related-products .grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }
}

/* ==========================================================================
   11. Global Container & Breadcrumb Standard Across All Pages
   Đồng bộ căn lề container 1440px và breadcrumb thẳng tắp 100% với nội dung
   ========================================================================== */

/* Nền trắng đồng nhất cho toàn bộ các trang nội dung */
@media (max-width: 991px) {
    main.py-4 {
        padding-top: 6px !important;
    }

    .container,
    .uv-search-container,
    .uv-cart-container,
    .container.breadcrumb,
    .breadcrumb.container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .container.breadcrumb,
    .breadcrumb.container {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
        margin-bottom: 18px !important;
        font-size: 0.82rem !important;
        gap: 5px !important;
    }

    .container .breadcrumb {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
        margin-bottom: 18px !important;
        font-size: 0.82rem !important;
    }
}

/* ==========================================================================
   12. Project Page (Trang Dự Án) Spacing & Responsive Optimization
   Cân đều khoảng cách giữa Phân trang, Tiêu đề Khách hàng và Logo đối tác
   ========================================================================== */

/* Clean Main Container */
.project-page-main {
    background: #ffffff !important;
    padding-top: 10px !important;
    padding-bottom: 45px !important;
}

/* Intro Box */
.catalogue-intro {
    max-width: 850px;
    margin: 0 auto 30px;
    text-align: center;
}

.catalogue-intro p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Project Grid & Cards */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.project-card {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color, #EFA688);
}

.project-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.project-info {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0 0 10px;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #888;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f2f3f5;
}

/* Client Marquee Section - Balanced Spacing */
.client-section {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f2f3f5;
}

.client-section .page-title-center {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 2rem !important;
    margin-bottom: 20px !important;
    color: #1a1a1a;
    text-align: center;
}

.client-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0 15px;
}

.client-marquee-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    animation: marqueeScroll 35s linear infinite !important;
}

.client-marquee-track:hover {
    animation-play-state: paused !important;
}

.client-marquee-group {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding-right: 20px !important;
    flex-shrink: 0 !important;
}

.client-logo {
    width: 190px !important;
    height: 95px !important;
    background: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 22px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.client-logo:hover {
    border-color: var(--primary-color, #EFA688) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.client-logo img,
.client-logo-img {
    max-width: 100% !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

.client-logo:hover img,
.client-logo:hover .client-logo-img {
    transform: scale(1.06) !important;
}

.client-logo h4 {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    text-align: center !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Project Page Mobile Responsiveness */
@media (max-width: 991px) {
    .project-page-main {
        padding-top: 8px !important;
        padding-bottom: 25px !important;
    }

    .catalogue-intro {
        margin-bottom: 20px !important;
        padding: 0 10px !important;
    }

    .catalogue-intro p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    /* Projects Grid: 2 Columns on Mobile */
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
        margin-bottom: 20px !important;
    }

    .project-card {
        border-radius: 10px !important;
    }

    .project-img {
        height: 130px !important;
    }

    .project-info {
        padding: 10px 10px !important;
    }

    .project-title {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }

    .project-meta {
        font-size: 0.72rem !important;
        padding-top: 6px !important;
    }

    /* Client Section Mobile: Cân đều khoảng cách trên dưới */
    .client-section {
        margin-top: 15px !important;
        padding-top: 15px !important;
    }

    .client-section .page-title-center {
        font-size: 1.55rem !important;
        margin-bottom: 14px !important;
    }

    .client-logo {
        width: 130px !important;
        height: 70px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .client-logo h4 {
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   13. Luxury Cart Page Professional Responsive Styling
   ========================================================================== */

.cart-page-main {
    background: #ffffff !important;
    padding-top: 10px !important;
    padding-bottom: 60px !important;
    min-height: 65vh;
}

.uv-cart-container {
    max-width: 1200px;
    margin: 0 auto;
}

.uv-cart-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f2f3f5;
}

.uv-cart-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.uv-cart-badge {
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
}

/* 2-Column Layout */
.uv-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 35px;
    align-items: start;
}

/* Left Column: Cart Table & Items */
.uv-cart-items-col {
    background: #ffffff;
}

.uv-cart-table-header {
    display: grid;
    grid-template-columns: 3fr 1.2fr 1.2fr 1.4fr 40px;
    align-items: center;
    background: #f8f9fa;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.uv-cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.uv-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr 1.2fr 1.2fr 1.4fr 40px;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.uv-cart-item:hover {
    border-color: #d8d8d8;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.uv-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #fbfbfb;
    border: 1px solid #eee;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.uv-item-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.uv-item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.uv-item-vendor {
    font-size: 0.72rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
}

.uv-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.uv-item-title a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.uv-item-title a:hover {
    color: var(--primary-color, #EFA688);
}

.uv-item-variant {
    font-size: 0.82rem;
    color: #666;
}

.uv-item-sku {
    font-size: 0.75rem;
    color: #aaa;
}

.uv-item-price-mobile {
    display: none;
}

.uv-price-val {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

/* Quantity Box */
.uv-qty-box {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #EAEAEA;
    border-radius: 50px;
    background: #fafafa;
    padding: 2px 4px;
}

.uv-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.uv-qty-btn:hover {
    background: var(--primary-color, #EFA688);
    color: #fff;
}

.uv-qty-input {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.92rem;
    color: #222;
    outline: none;
    -moz-appearance: textfield;
}

.uv-qty-input::-webkit-outer-spin-button,
.uv-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.uv-item-total-col {
    display: flex;
    align-items: center;
}

.uv-total-label-mobile {
    display: none;
}

.uv-total-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color, #EFA688);
}

.uv-remove-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 1px solid #eaeaea;
    color: #999;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.uv-remove-btn:hover {
    background: #ffebe6;
    color: #e74c3c;
    border-color: #ffc9bd;
}

/* Bottom Actions */
.uv-cart-bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f2f3f5;
    flex-wrap: wrap;
    gap: 12px;
}

.uv-btn-back-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.uv-btn-back-shop:hover {
    color: var(--primary-color, #EFA688);
}

.uv-btn-update-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    background: #ffffff;
    border: 1.5px solid #ddd;
    color: #333;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.uv-btn-update-cart:hover {
    border-color: var(--primary-color, #EFA688);
    color: var(--primary-color, #EFA688);
}

/* Right Column: Summary Card */
.uv-summary-card {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 90px;
}

.uv-summary-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.uv-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.92rem;
    color: #555;
}

.uv-summary-num {
    font-weight: 600;
    color: #222;
}

.uv-summary-free {
    font-size: 0.85rem;
    color: #888;
}

.uv-summary-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 16px 0 14px;
}

.uv-summary-total {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.uv-summary-total-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-color, #EFA688);
}

.uv-vat-note {
    font-size: 0.78rem;
    color: #999;
    margin: 0 0 18px;
    text-align: right;
}

/* Cart Notes */
.uv-cart-note-box {
    margin-bottom: 20px;
}

.uv-cart-note-box label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.uv-cart-note-box textarea {
    width: 100%;
    height: 75px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #333;
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.uv-cart-note-box textarea:focus {
    border-color: var(--primary-color, #EFA688);
}

/* Checkout CTA */
.uv-btn-checkout-now {
    width: 100%;
    padding: 15px 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(239, 166, 136, 0.4);
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.uv-btn-checkout-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(239, 166, 136, 0.5);
}

/* Trust Badges */
.uv-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f2f3f5;
}

.uv-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #666;
}

.uv-trust-item i {
    color: var(--primary-color, #EFA688);
    font-size: 0.85rem;
}

/* Empty Cart State */
.uv-cart-empty {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
    max-width: 550px;
    margin: 30px auto;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.03);
}

.uv-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FFF5F0;
    color: var(--primary-color, #EFA688);
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.uv-empty-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.uv-empty-desc {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.55;
    margin: 0 0 25px;
}

.uv-btn-empty-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(239, 166, 136, 0.35);
    transition: all 0.25s ease;
}

.uv-btn-empty-shop:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 166, 136, 0.45);
}

/* Mobile Responsive Cart Page */
@media (max-width: 991px) {
    .cart-page-main {
        padding-bottom: 40px !important;
    }

    .uv-cart-title {
        font-size: 1.45rem !important;
    }

    .uv-cart-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .uv-cart-table-header {
        display: none !important;
    }

    .uv-cart-item {
        grid-template-columns: 75px 1fr auto !important;
        grid-template-areas: 
            "img details del"
            "img qty total" !important;
        gap: 12px 10px !important;
        padding: 14px !important;
        position: relative !important;
    }

    .uv-item-img {
        grid-area: img !important;
        width: 75px !important;
        height: 75px !important;
    }

    .uv-item-details {
        grid-area: details !important;
    }

    .uv-item-title {
        font-size: 0.88rem !important;
    }

    .uv-item-price-col {
        display: none !important;
    }

    .uv-item-price-mobile {
        display: block !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #555 !important;
        margin-top: 2px !important;
    }

    .uv-item-qty-col {
        grid-area: qty !important;
    }

    .uv-qty-box {
        padding: 2px !important;
    }

    .uv-qty-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }

    .uv-qty-input {
        width: 28px !important;
        font-size: 0.85rem !important;
    }

    .uv-item-total-col {
        grid-area: total !important;
        justify-content: flex-end !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .uv-total-label-mobile {
        display: block !important;
        font-size: 0.72rem !important;
        color: #888 !important;
    }

    .uv-total-val {
        font-size: 0.95rem !important;
    }

    .uv-item-remove-col {
        grid-area: del !important;
        justify-content: flex-end !important;
    }

    .uv-remove-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    .uv-cart-bottom-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .uv-btn-back-shop,
    .uv-btn-update-cart {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px !important;
    }

    .uv-summary-card {
        padding: 18px 16px !important;
        position: static !important;
    }
}

/* ==========================================================================
   14. Luxury 404 Error Page Professional Responsive Styling
   ========================================================================== */

.page-404-main {
    background: #ffffff !important;
    padding-top: 15px !important;
    padding-bottom: 70px !important;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.uv-404-card {
    max-width: 750px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.uv-404-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    background: #FFF5F0;
    color: var(--primary-color, #EFA688);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.uv-404-number {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 15px;
    color: #1a1a1a;
    letter-spacing: 2px;
}

.uv-404-number span {
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.uv-404-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.8rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 12px;
}

.uv-404-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    max-width: 550px;
    margin: 0 auto 25px;
}

.uv-404-search-wrap {
    max-width: 500px;
    margin: 0 auto 28px;
}

.uv-404-search-form {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1.5px solid #EAEAEA;
    border-radius: 50px;
    padding: 4px 6px 4px 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uv-404-search-form:focus-within {
    border-color: var(--primary-color, #EFA688);
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 166, 136, 0.2);
}

.uv-404-search-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: #222;
    outline: none;
    font-family: inherit;
}

.uv-404-search-form button {
    padding: 10px 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.uv-404-search-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(239, 166, 136, 0.4);
}

.uv-404-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.uv-btn-404-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(239, 166, 136, 0.35);
    transition: all 0.25s ease;
}

.uv-btn-404-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 166, 136, 0.45);
}

.uv-btn-404-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 50px;
    background: #ffffff;
    border: 1.5px solid #ddd;
    color: #444 !important;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.uv-btn-404-secondary:hover {
    border-color: var(--primary-color, #EFA688);
    color: var(--primary-color, #EFA688) !important;
}

.uv-404-quicklinks {
    padding-top: 20px;
    border-top: 1px solid #f2f3f5;
    font-size: 0.85rem;
    color: #888;
}

.uv-404-quicklinks span {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.uv-404-links-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.uv-404-links-group a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.uv-404-links-group a:hover {
    color: var(--primary-color, #EFA688);
}

/* Mobile Responsive 404 */
@media (max-width: 991px) {
    .page-404-main {
        padding-bottom: 40px !important;
        min-height: auto;
    }

    .uv-404-card {
        padding: 30px 18px !important;
        border-radius: 14px !important;
    }

    .uv-404-number {
        font-size: 4.5rem !important;
    }

    .uv-404-title {
        font-size: 1.35rem !important;
    }

    .uv-404-desc {
        font-size: 0.88rem !important;
        margin-bottom: 20px !important;
    }

    .uv-404-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .uv-btn-404-primary,
    .uv-btn-404-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   15. Luxury Search Page Professional Responsive Styling
   ========================================================================== */

.search-page-main {
    background: #ffffff !important;
    padding-top: 10px !important;
    padding-bottom: 60px !important;
    min-height: 65vh;
}

.uv-search-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Search Top Box */
.uv-search-top-box {
    background: linear-gradient(180deg, #FFF9F6 0%, #ffffff 100%);
    border: 1px solid #F5EAE4;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    margin-bottom: 35px;
    box-shadow: 0 4px 20px rgba(239, 166, 136, 0.06);
}

.uv-search-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}

.uv-search-subheading {
    font-size: 0.95rem;
    color: #666;
    margin: 0 auto 22px;
    max-width: 600px;
}

.uv-search-bar-form {
    display: flex;
    align-items: center;
    max-width: 620px;
    margin: 0 auto;
    background: #ffffff;
    border: 2px solid #EAEAEA;
    border-radius: 50px;
    padding: 4px 6px 4px 22px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.uv-search-bar-form:focus-within {
    border-color: var(--primary-color, #EFA688);
    box-shadow: 0 6px 20px rgba(239, 166, 136, 0.25);
}

.uv-search-bar-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: #222;
    outline: none;
    font-family: inherit;
    font-weight: 500;
}

.uv-search-bar-form button {
    padding: 11px 25px;
    border-radius: 50px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.uv-search-bar-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 166, 136, 0.4);
}

/* Results Header */
.uv-search-results-header {
    margin-bottom: 25px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.uv-results-count-text {
    font-size: 1.05rem;
    color: #444;
}

.uv-results-count-text strong {
    color: #1a1a1a;
}

.uv-term-highlight {
    color: var(--primary-color, #EFA688);
    font-weight: 700;
}

/* Empty Search Results Card */
.uv-search-empty-card {
    background: #ffffff;
    border: 1px solid #EAEAEA;
    border-radius: 16px;
    padding: 50px 25px;
    text-align: center;
    max-width: 650px;
    margin: 20px auto 40px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.02);
}

.uv-search-empty-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #FFF5F0;
    color: var(--primary-color, #EFA688);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.uv-search-empty-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
}

.uv-search-empty-desc {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.6;
    margin: 0 auto 22px;
    max-width: 500px;
}

.uv-search-suggestions {
    margin: 20px 0 25px;
    padding-top: 18px;
    border-top: 1px solid #f2f3f5;
}

.uv-search-suggestions span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #777;
    margin-bottom: 10px;
}

.uv-search-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.uv-search-tags a {
    display: inline-block;
    padding: 6px 14px;
    background: #f8f9fa;
    border: 1px solid #EAEAEA;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
}

.uv-search-tags a:hover {
    background: var(--primary-color, #EFA688);
    color: #ffffff;
    border-color: var(--primary-color, #EFA688);
}

.uv-btn-explore-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #EFA688 0%, #d68b66 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(239, 166, 136, 0.35);
    transition: all 0.25s ease;
}

.uv-btn-explore-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 166, 136, 0.45);
}

/* Mobile Responsive Search Page */
@media (max-width: 991px) {
    .search-page-main {
        padding-bottom: 35px !important;
    }

    .uv-search-top-box {
        padding: 22px 14px !important;
        margin-bottom: 22px !important;
    }

    .uv-search-heading {
        font-size: 1.45rem !important;
    }

    .uv-search-subheading {
        font-size: 0.85rem !important;
        margin-bottom: 16px !important;
    }

    .uv-search-bar-form {
        padding: 3px 4px 3px 14px !important;
    }

    .uv-search-bar-form input {
        font-size: 0.88rem !important;
    }

    .uv-search-bar-form button {
        padding: 9px 16px !important;
        font-size: 0.82rem !important;
    }

    .uv-results-count-text {
        font-size: 0.92rem !important;
    }

    .uv-search-empty-card {
        padding: 30px 16px !important;
        margin: 15px auto 25px !important;
    }

    .uv-search-empty-title {
        font-size: 1.2rem !important;
    }
}





.bento-logo-text span {
    color: #ED9D77 !important;
}

@media (max-width: 768px) {
    .footer-contact-address,
    .footer-contact-address p {
        white-space: normal;
    }
}

/* Collection page: responsive-only cleanup. */
@media (max-width: 991px) {
    #collection-product-grid .cat-card,
    .category-main .filter-bar,
    .category-layout .sidebar-sublist {
        border: none !important;
        box-shadow: none !important;
    }

}

/* Blog cards: make article images readable on mobile. */
@media (max-width: 768px) {
    .blog-list-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 14px !important;
    }

    .blog-list-img-wrapper,
    .blog-list-img {
        width: 100% !important;
    }

    .blog-list-img {
        height: auto !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

/* Studio FAQ desktop: match the demo's single white panel with minimal dividers. */
@media (min-width: 992px) {
    .studio-faq.faq-section {
        padding: 0 !important;
        margin-top: 40px !important;
        margin-bottom: 60px !important;
        background: transparent !important;
    }

    .studio-faq .faq-container {
        display: flex !important;
        gap: 60px !important;
        background: #fff !important;
        padding: 60px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important;
    }

    .studio-faq .faq-left {
        flex: 0 0 35% !important;
    }

    .studio-faq .faq-right {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        border-top: 1px solid #ddd !important;
    }

    .studio-faq .accordion-item {
        border: 0 !important;
        border-bottom: 1px solid #ddd !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .studio-faq .accordion-header {
        padding: 25px 0 !important;
    }

    .studio-faq .accordion-header h4 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #222 !important;
        line-height: 1.4 !important;
    }

    .studio-faq .accordion-icon {
        font-size: 1rem !important;
        color: #222 !important;
    }
}

/* Studio FAQ mobile: keep the same single-panel treatment as desktop. */
@media (max-width: 991px) {
    .studio-faq.faq-section {
        padding: 0 !important;
        margin-top: 30px !important;
        margin-bottom: 40px !important;
        background: transparent !important;
    }

    .studio-faq .faq-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        padding: 30px 20px !important;
        background: #fff !important;
        border-radius: 16px !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.03) !important;
    }

    .studio-faq .faq-left {
        flex: none !important;
    }

    .studio-faq .faq-left .section-title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .studio-faq .faq-right {
        flex: none !important;
        width: 100% !important;
        border-top: 1px solid #ddd !important;
    }

    .studio-faq .accordion-item {
        border: 0 !important;
        border-bottom: 1px solid #ddd !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .studio-faq .accordion-header {
        padding: 18px 0 !important;
    }

    .studio-faq .accordion-header h4 {
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

    .studio-faq .accordion-body {
        padding: 0 0 18px !important;
        font-size: 0.9rem !important;
    }
}

/* Course intro: align it to the same full content width as the instructor block. */
.course-page-main .course-page-intro {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 45px !important;
    text-align: left !important;
}

.course-page-main .course-page-intro-title {
    margin: 0 0 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    color: var(--dark-bg) !important;
}

.course-page-main .course-page-intro p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Product FAQ: flat gray layout, matching the product demo. */
@media (max-width: 991px) {
    .product-page-main .faq-section {
        background-color: var(--secondary-bg, #F3F5F5) !important;
    }

    .product-page-main .faq-minimal {
        gap: 0 !important;
        border-top: 1px solid #d9d9d9 !important;
    }

    .product-page-main .faq-minimal .accordion-item {
        border: none !important;
        border-bottom: 1px solid #d9d9d9 !important;
        border-radius: 0 !important;
        padding: 25px 0 !important;
        background: transparent !important;
    }

    .product-page-main .faq-minimal .accordion-item:hover {
        padding-left: 0 !important;
    }

    .product-page-main .faq-minimal .accordion-icon {
        color: #000 !important;
    }

    .product-page-main .commit-icon-image {
        width: 28px !important;
        height: 28px !important;
        display: block !important;
        object-fit: contain !important;
    }

    .product-page-main .commit-icon {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
}

/* ==========================================================================
   Global Pure White Background (#ffffff) for all Product Cards & Image Wrappers
   ========================================================================== */
.hs-hero-card,
.product-card,
.cat-card,
.product-item,
.pro-item,
.itemProduct,
.skincare-product-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.hs-hero-img-wrapper,
.product-card .img-wrapper,
.cat-card .cat-card-img,
.product-item .img-wrapper,
.product-item .image,
.itemProduct .image,
.skincare-product-card__media,
.skincare-product-card__image-wrap {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.product-card .img-wrapper img,
.cat-card .cat-card-img img,
.product-item .img-wrapper img,
.product-item .image img,
.itemProduct .image img,
.skincare-product-card__media img,
.skincare-product-card__image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Button Hover Fix: Chữ và icon luôn chuyển sang màu trắng (#ffffff) khi hover
   ========================================================================== */
.btn-outline,
.btn-outline-primary {
    border: 1.5px solid var(--primary-color, #c89a58) !important;
    color: var(--primary-color, #c89a58) !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-color, #c89a58) !important;
    background-color: var(--primary-color, #c89a58) !important;
    border-color: var(--primary-color, #c89a58) !important;
    color: #ffffff !important;
}

.btn-outline:hover *,
.btn-outline:focus *,
.btn-outline-primary:hover *,
.btn-outline-primary:focus * {
    color: #ffffff !important;
}

/* ==========================================================================
   Specs Table & Description Tables: Không tạo line bảng (Borderless Zebra)
   ========================================================================== */
.specs-table,
.desc-content table,
#product-desc-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.specs-table tr,
.desc-content table tr,
#product-desc-content table tr {
    border: none !important;
    background: transparent !important;
}

.specs-table tr:nth-child(even),
.desc-content table tr:nth-child(even),
#product-desc-content table tr:nth-child(even) {
    background-color: #F7F8F9 !important;
}

.specs-table tr:nth-child(odd),
.desc-content table tr:nth-child(odd),
#product-desc-content table tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.specs-table th,
.specs-table td,
.desc-content table th,
.desc-content table td,
#product-desc-content table th,
#product-desc-content table td {
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
}

.specs-table td:first-child,
.desc-content table th:first-child,
.desc-content table td:first-child,
#product-desc-content table th:first-child,
#product-desc-content table td:first-child {
    font-weight: 500 !important;
    color: #666666 !important;
    width: 32% !important;
    border: none !important;
    background: transparent !important;
}

.specs-table td:last-child,
.desc-content table td:last-child,
#product-desc-content table td:last-child {
    font-weight: 500 !important;
    color: #222222 !important;
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
   Product Description Typography: Giãn khoảng cách Heading & Line Height 30px
   ========================================================================== */
.desc-content h1,
.desc-content h2,
.desc-content h3,
#product-desc-content h1,
#product-desc-content h2,
#product-desc-content h3 {
    margin-top: 38px !important;
    margin-bottom: 22px !important;
    line-height: 1.4 !important;
}

.desc-content h1:first-child,
.desc-content h2:first-child,
.desc-content h3:first-child,
#product-desc-content h1:first-child,
#product-desc-content h2:first-child,
#product-desc-content h3:first-child {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.desc-content h4,
.desc-content h5,
.desc-content h6,
#product-desc-content h4,
#product-desc-content h5,
#product-desc-content h6 {
    margin-top: 32px !important;
    margin-bottom: 18px !important;
    line-height: 1.4 !important;
}

.desc-content p,
.desc-content span,
.desc-content div,
#product-desc-content p,
#product-desc-content span,
#product-desc-content div {
    line-height: 30px !important;
    margin-bottom: 20px !important;
}

.desc-content ul,
.desc-content ol,
#product-desc-content ul,
#product-desc-content ol {
    line-height: 30px !important;
    margin-bottom: 24px !important;
}

.desc-content li,
#product-desc-content li {
    line-height: 30px !important;
    margin-bottom: 8px !important;
}

/* ==========================================================================
   Global Product Card Title Typography: Chuẩn font Montserrat (Sans-serif)
   ========================================================================== */
.product-card h4,
.product-card .cat-title,
.product-card-title,
.cat-card h4,
.cat-card-info h4,
.cat-card-title,
.hs-hero-content h3,
.hs-sidekick-wrapper .product-card h4,
#collection-product-grid .cat-card-info h4,
#collection-product-grid .cat-card h4,
.category-main .cat-card-info h4,
.category-main .view-list-mode .cat-card-info h4,
.itemProduct h4,
.product-item h4,
.pro-item h4,
.skincare-product-card__title,
.skincare-product-card__title a {
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Header Navigation Dropdown & Mega Menu: Đồng nhất cao độ vị trí xuất hiện
   ========================================================================== */
.main-nav .nav-list > li {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
}

.main-nav .nav-list > li > a {
    display: inline-flex !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease, font-weight 0.2s ease !important;
}

#main-header .main-nav .nav-list > li > a.active,
#main-header .main-nav .nav-list > li.active > a,
#main-header .main-nav .nav-list > li.is-active > a,
.main-nav .nav-list > li > a.active,
.main-nav .nav-list > li.active > a,
.main-nav .nav-list > li.is-active > a {
    color: var(--primary-color, #ED9D77) !important;
}

#main-header .main-nav .nav-list > li > a.active i,
#main-header .main-nav .nav-list > li.active > a i,
#main-header .main-nav .nav-list > li.is-active > a i,
.main-nav .nav-list > li > a.active i,
.main-nav .nav-list > li.active > a i,
.main-nav .nav-list > li.is-active > a i {
    color: var(--primary-color, #ED9D77) !important;
}

.main-nav .nav-list > li.has-dropdown {
    position: relative !important;
}

.main-nav .nav-list > li.has-mega-menu {
    position: static !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 240px !important;
    width: max-content !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
    z-index: 9999 !important;
    text-align: left !important;
    white-space: normal !important;
}

.dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    width: 100% !important;
    height: 12px !important;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.dropdown-menu > li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 22px !important;
    color: #444444 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    line-height: 1.4 !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a.active,
.dropdown-menu > li.active > a,
.dropdown-menu > li.is-active > a {
    color: var(--primary-color, #ED9D77) !important;
    background-color: rgba(237, 157, 119, 0.08) !important;
    padding-left: 26px !important;
}

/* Sub Dropdown */
.sub-dropdown-menu {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 8px 0 !important;
    margin: 0 0 0 2px !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(6px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
    z-index: 10000 !important;
}

.sub-dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -10px !important;
    width: 10px !important;
    height: 100% !important;
}

.has-sub-dropdown:hover .sub-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.sub-dropdown-menu > li > a {
    display: block !important;
    padding: 9px 20px !important;
    color: #444444 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    font-family: 'Montserrat', sans-serif !important;
}

.sub-dropdown-menu > li > a:hover,
.sub-dropdown-menu > li > a.active,
.sub-dropdown-menu > li.active > a,
.sub-dropdown-menu > li.is-active > a {
    color: var(--primary-color, #ED9D77) !important;
    background-color: rgba(237, 157, 119, 0.08) !important;
    padding-left: 24px !important;
}

/* ==========================================================================
   Header Utility Icons (En / Account) Mini Dropdowns
   ========================================================================== */
.header-dropdown,
.header-icons .has-dropdown {
    position: relative !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-dropdown .mini-dropdown,
.header-icons .mini-dropdown,
.mini-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    width: 170px !important;
    min-width: 170px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 99999 !important;
    white-space: nowrap !important;
}

.header-dropdown .mini-dropdown::before,
.header-icons .mini-dropdown::before,
.mini-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    right: 0 !important;
    width: 100% !important;
    height: 15px !important;
}

.header-dropdown:hover .mini-dropdown,
.header-icons .has-dropdown:hover .mini-dropdown,
.header-dropdown:hover > .mini-dropdown,
.header-icons .has-dropdown:hover > .mini-dropdown,
.header-dropdown.is-open .mini-dropdown,
.header-dropdown.is-open > .mini-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.mini-dropdown ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.mini-dropdown li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mini-dropdown li a {
    display: block !important;
    padding: 8px 16px !important;
    color: #444444 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.2s ease !important;
    font-family: 'Montserrat', sans-serif !important;
    text-align: left !important;
}

.mini-dropdown li a:hover {
    background: rgba(200, 154, 88, 0.08) !important;
    color: var(--primary-color, #c89a58) !important;
    padding-left: 20px !important;
}

/* ==========================================================================
   Brand Page: Intro Text aligned with Main Content Column
   ========================================================================== */
.brand-intro,
#brand-main-content .brand-intro {
    text-align: left !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
    color: #444444 !important;
}

.brand-intro p,
#brand-main-content .brand-intro p {
    margin: 0 !important;
    line-height: 1.75 !important;
    font-size: 0.98rem !important;
    color: #444444 !important;
}

/* ==========================================================================
   Blog List Cards: Ảnh đại diện ngang (Landscape 16:9) không bao giờ bị dọc
   ========================================================================== */
.blog-list-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 30px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 1px solid #EAEAEA !important;
    text-decoration: none !important;
    margin-bottom: 25px !important;
}

.blog-list-card:hover {
    border-color: var(--primary-color, #c89a58) !important;
}

.blog-list-img-wrapper {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #f5f5f5 !important;
    display: block !important;
}

.blog-list-img,
.blog-list-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 8px !important;
}

.blog-list-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.blog-list-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #222222 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.blog-list-excerpt {
    font-size: 0.92rem !important;
    color: #666666 !important;
    line-height: 1.65 !important;
    margin-bottom: 15px !important;
}

@media (max-width: 768px) {
    .blog-list-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 15px !important;
    }

    .blog-list-img-wrapper {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* ==========================================================================
   Project Cards: Ảnh đại diện định dạng VUÔNG (Aspect Ratio 1:1) tự động Scale & Crop
   ========================================================================== */
.project-card {
    background: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.project-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--primary-color, #EFA688) !important;
}

.project-img-wrap,
.project-img-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background: #f5f5f5 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.project-img,
.project-card img,
.project-card .project-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transition: transform 0.4s ease !important;
}

.project-card:hover .project-img,
.project-card:hover img {
    transform: scale(1.04) !important;
}

.project-info {
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    background: #ffffff !important;
}

.project-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    margin: 0 0 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 42px !important;
}

.project-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    color: #888888 !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid #f2f3f5 !important;
}

.project-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   Mobile Hotspot Modal (Popup ở GIỮA MÀN HÌNH có nút tắt X chuẩn chuyên nghiệp)
   ========================================================================== */
.mobile-hs-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.mobile-hs-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-hs-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.mobile-hs-card {
    position: relative !important;
    width: 100% !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 28px 20px 22px !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
    z-index: 2 !important;
    transform: scale(0.9) translateY(15px) !important;
    transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.mobile-hs-modal.active .mobile-hs-card {
    transform: scale(1) translateY(0) !important;
}

/* Nút tắt X ở góc phải trên */
.mobile-hs-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #f1f2f4 !important;
    border: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #333333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
}

.mobile-hs-close:hover,
.mobile-hs-close:active {
    background: #e2e4e8 !important;
    color: #000000 !important;
    transform: scale(1.08) !important;
}

.mobile-hs-img {
    width: 100% !important;
    max-width: 190px !important;
    height: 140px !important;
    object-fit: contain !important;
    margin: 0 auto 15px !important;
    background: transparent !important;
    background-color: transparent !important;
    mix-blend-mode: multiply !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.mobile-hs-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px !important;
    line-height: 1.4 !important;
}

.mobile-hs-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 24px !important;
    background: var(--primary-color, #EFA688) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(239, 166, 136, 0.4) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}

.mobile-hs-link:active {
    transform: scale(0.98) !important;
}

/* Ẩn tooltip nhỏ inline trên mobile */
@media (max-width: 768px) {
    .hotspot-dot .hotspot-popup {
        display: none !important;
    }
}

/* ==========================================================================
   Sidebar Accordion (3 Cấp Chuẩn Demo main-category)
   ========================================================================== */
.sidebar-accordion {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.acc-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.acc-head {
    background: var(--primary-color, #EFA688) !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s ease !important;
    user-select: none !important;
}

.acc-head:hover {
    background: #e69674 !important;
}

.acc-head i {
    font-size: 1.15rem !important;
    opacity: 0.9 !important;
}

.acc-body {
    display: none !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

.acc-body.active {
    display: flex !important;
}

.sub-acc-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.sub-acc-head {
    background: #FEF3ED !important;
    color: #1a1a1a !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    font-family: 'Montserrat', sans-serif !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    user-select: none !important;
    text-decoration: none !important;
}

.sub-acc-head:hover {
    background: #fcece3 !important;
}

.sub-acc-head.active {
    background: #fce7dc !important;
}

.sub-acc-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
}

.sub-acc-head-left i {
    color: #555555 !important;
    font-size: 0.68rem !important;
}

.sub-acc-head > i {
    font-size: 0.8rem !important;
    color: #444444 !important;
    transition: transform 0.2s ease !important;
}

.sub-acc-body {
    display: none !important;
    list-style: disc !important;
    padding: 12px 18px 12px 42px !important;
    margin: 0 !important;
    background: transparent !important;
}

.sub-acc-body.active {
    display: block !important;
}

.sub-acc-body li {
    margin-bottom: 10px !important;
    color: #888888 !important;
    font-size: 0.88rem !important;
}

.sub-acc-body li:last-child {
    margin-bottom: 0 !important;
}

.sub-acc-body li a {
    color: #444444 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
}

.sub-acc-body li a:hover {
    color: var(--primary-color, #EFA688) !important;
}

.sub-acc-body li a.active {
    color: var(--primary-color, #EFA688) !important;
    font-weight: 700 !important;
}

.btn-vendor-pill:hover {
    background: var(--primary-color, #EFA688) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Hero Slider Mobile Center Alignment (Căn giữa tiêu đề, mô tả, nút trên Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    .hero-content {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        width: calc(100% - 32px) !important;
        max-width: 480px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    .hero-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
        margin-bottom: 22px !important;
        padding: 0 5px !important;
    }

    .hero-content .btn,
    .hero-content .btn-primary,
    .hero-content .btn-white {
        margin: 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* ==========================================================================
       Seasonal Bento Banner Mobile Fix (Khắc phục mất chữ khối Nổi Bật Mùa Lễ Hội)
       ========================================================================== */
    .sb-large {
        min-height: 380px !important;
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .sb-large img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }

    .sb-content {
        position: relative !important;
        z-index: 2 !important;
        padding: 30px 20px 24px !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .sb-content h3 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 16px !important;
        text-align: center !important;
        color: #ffffff !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    .sb-content .btn,
    .sb-content .btn-primary {
        margin: 0 auto !important;
        display: inline-flex !important;
        padding: 10px 24px !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-radius: 50px !important;
    }

    /* ==========================================================================
       Masterclasses Button Mobile Center (Căn giữa nút Xem thêm khóa học trên Mobile)
       ========================================================================== */
    .mc-btn-wrap {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 25px !important;
        width: 100% !important;
    }

    .mc-btn-wrap .btn,
    .mc-btn-wrap .btn-outline {
        margin: 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   Ẩn hoàn toàn nút Floating Mục Lục mép trái
   ========================================================================== */
.floating-toc-wrapper,
.floating-toc-trigger,
.floating-toc-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Catalogues Grid Mobile: 1 Cột (Full-width card chuẩn mobile) & Logo Auto-Scale
   ========================================================================== */
.catalogue-logo-badge {
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-weight: 900 !important;
    font-size: clamp(1.2rem, 3.5vw, 1.9rem) !important;
    color: #000000 !important;
    letter-spacing: -0.5px !important;
    border: 3px solid #000000 !important;
    border-radius: 40px !important;
    padding: 6px 20px !important;
    margin: 0 auto !important;
    text-transform: uppercase !important;
    max-width: 90% !important;
    text-align: center !important;
    display: inline-block !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

.catalogue-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    align-items: stretch !important;
}

.catalogue-card {
    border: 1px solid #EAEAEA !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: var(--transition-fast) !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.catalogue-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    transform: translateY(-3px) !important;
}

.catalogue-img-box {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    position: relative !important;
    overflow: hidden !important;
    background: #f9f9f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.catalogue-img-box img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.catalogue-card:hover .catalogue-img-box img {
    transform: scale(1.05) !important;
}

.catalogue-info {
    padding: 25px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.catalogue-title {
    font-family: var(--font-main) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--dark-bg) !important;
    margin-bottom: 12px !important;
}

.catalogue-desc {
    font-size: 0.9rem !important;
    color: var(--text-main) !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    flex-grow: 1 !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
}

@media (max-width: 768px) {
    .catalogue-grid,
    .text-content-container .grid-3,
    .related-catalogues-section .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .catalogue-card {
        width: 100% !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
    }

    .catalogue-img-box {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .catalogue-img-box img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }

    .catalogue-logo-badge {
        font-size: 1.4rem !important;
        padding: 6px 16px !important;
        border-width: 2.5px !important;
        max-width: 92% !important;
    }

    .catalogue-info {
        padding: 20px !important;
    }

    .catalogue-title {
        font-size: 1.15rem !important;
        margin-bottom: 10px !important;
    }

    .catalogue-desc {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   Hero Product Card Title Size: Cập nhật size chữ tiêu đề sản phẩm còn 28px
   ========================================================================== */
.hs-hero-content h3 {
    font-size: 28px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   Page: Nổi Bật Mùa Lễ Hội (page.noibatmualehoi.liquid)
   ========================================================================== */
.collection-products {
    padding: 20px 0 40px;
}

.c-product-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    text-align: center !important;
    border: 1px solid #eeeeee !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.c-product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(199, 0, 57, 0.15) !important;
    border-color: #C70039 !important;
}

.c-badge {
    position: absolute !important;
    top: 15px !important;
    left: -8px !important;
    background: #FFC300 !important;
    color: #900C3F !important;
    padding: 5px 15px !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 2 !important;
    border-radius: 0 4px 4px 0 !important;
}

.c-badge::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 0 !important;
    border-top: 6px solid #b38900 !important;
    border-left: 8px solid transparent !important;
}

.c-product-img-wrap {
    width: 100% !important;
    height: 250px !important;
    background: #fdfdfd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.c-product-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    transition: transform 0.4s ease !important;
}

.c-product-card:hover .c-product-img {
    transform: scale(1.05) !important;
}

.c-product-info {
    padding: 20px 18px 24px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.c-product-title {
    font-size: 1.05rem !important;
    color: var(--dark-bg, #1a1a1a) !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.c-price-box {
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.c-price {
    color: #C70039 !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
}

.c-old-price {
    color: #999999 !important;
    text-decoration: line-through !important;
    font-size: 0.88rem !important;
}

.c-btn-action {
    width: 100% !important;
    margin-top: auto !important;
    border-color: #C70039 !important;
    color: #C70039 !important;
    display: block !important;
    text-decoration: none !important;
    padding: 10px 0 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    transition: all 0.25s ease !important;
}

.c-btn-action:hover {
    background: #C70039 !important;
    color: #ffffff !important;
}

/* Flexible collection introduction */
.collection-intro-section {
    padding: 60px 0 70px !important;
    background: #f6f4f1 !important;
    margin-bottom: 60px !important;
}

.collection-intro-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: 50px !important;
}

.collection-intro-label {
    margin-bottom: 12px !important;
    color: #C70039 !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.collection-intro-title {
    margin-bottom: 20px !important;
    color: var(--dark-bg, #1a1a1a) !important;
    font-size: 2.4rem !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.25 !important;
}

.collection-intro-copy {
    max-width: 580px !important;
    color: var(--text-main, #444444) !important;
    font-size: 1.02rem !important;
    line-height: 1.8 !important;
}

.collection-video-placeholder {
    position: relative !important;
    min-height: 340px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #26292b !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14) !important;
}

.collection-video-placeholder img {
    width: 100% !important;
    height: 100% !important;
    min-height: 340px !important;
    object-fit: cover !important;
    opacity: 0.72 !important;
    display: block !important;
}

.collection-video-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    color: #ffffff !important;
    text-align: center !important;
}

.collection-video-play {
    display: flex !important;
    width: 68px !important;
    height: 68px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    backdrop-filter: blur(4px) !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
}

.collection-video-placeholder:hover .collection-video-play {
    transform: scale(1.1) !important;
    background: #C70039 !important;
    border-color: #C70039 !important;
}

.collection-video-label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.c-product-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
}

@media (max-width: 900px) {
    .collection-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .festive-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .collection-products .grid-4,
    #combo-section,
    .festive-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .c-product-card {
        max-width: 440px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .collection-intro-title {
        font-size: 1.8rem !important;
    }
}

/* ==========================================================================
   Typography Standards:
   - ALL headings across the entire site (content, blogs, projects, products, pages, RTE) MUST use font 'Montserrat'.
   - ONLY the Homepage (body.template-index) headings use font 'Playfair Display'.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-title,
.section-heading,
.page-title-center,
.page-title,
.article-title,
.blog-title,
.cat-title,
.collection-title,
.product-title,
.brand-section-title,
.course-page-intro-title,
.collection-intro-title,
.client-section .page-title-center,
.uv-search-heading,
.uv-404-number,
.uv-404-title,
.text-content h1, .text-content h2, .text-content h3, .text-content h4, .text-content h5, .text-content h6,
.article-detail h1, .article-detail h2, .article-detail h3, .article-detail h4, .article-detail h5, .article-detail h6,
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6,
.desc-content h1, .desc-content h2, .desc-content h3, .desc-content h4, .desc-content h5, .desc-content h6,
.pro-desc h1, .pro-desc h2, .pro-desc h3, .pro-desc h4, .pro-desc h5, .pro-desc h6,
.toc-box h4,
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
    font-family: 'Montserrat', sans-serif !important;
}

/* Home Page ONLY: Headings use Playfair Display */
body.template-index h1,
body.template-index h2,
body.template-index h3,
body.template-index h4,
body.template-index h5,
body.template-index h6,
body.template-index .section-title,
body.template-index .section-heading,
body.template-index .hero-title,
body.template-index .bento-left h2,
body.template-index .bento-card h3,
body.template-index .bento-logo-text,
body.template-index .home-brands-title,
body.template-index .section-title--compact {
    font-family: 'Playfair Display', serif !important;
}

/* ==========================================================================
   Article & Content Iframe Full Width (100%) & Equal Width Alignment
   ========================================================================== */
.blog-intro-section,
.blog-page-main .blog-intro-section {
    display: none !important;
}

.text-content-container {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.toc-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.text-content,
.catalogue-main-content,
.article-detail,
.page-content,
.entry-content,
.rte {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure ALL iframes (PDF viewers, Google Drive, Flipbooks, Videos...) have width: 100%, EXCLUDING product widgets */
.text-content iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.text-content-container iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.catalogue-main-content iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.article-detail iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.page-content iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.entry-content iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.desc-content iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.pro-desc iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.rte iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.pdf-placeholder,
#article-main-content iframe:not(.haravan-widget):not([src*="haravanwidgets"]):not([nosrc*="haravanwidgets"]):not([src*="onapp.haravan.com"]):not([nosrc*="onapp.haravan.com"]),
.text-content embed,
.text-content object,
.catalogue-main-content embed,
.catalogue-main-content object {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    border: none;
    border-radius: 8px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Haravan Product Embed Widget in Blog Articles, Pages & Content (Row 99: Nút XEM NGAY bám theo chiều ngang sản phẩm) */
.text-content iframe.haravan-widget,
.text-content iframe[src*="haravanwidgets"],
.text-content iframe[nosrc*="haravanwidgets"],
.text-content iframe[src*="onapp.haravan.com"],
.text-content iframe[nosrc*="onapp.haravan.com"],
.text-content-container iframe.haravan-widget,
.text-content-container iframe[src*="haravanwidgets"],
.text-content-container iframe[nosrc*="haravanwidgets"],
.text-content-container iframe[src*="onapp.haravan.com"],
.text-content-container iframe[nosrc*="onapp.haravan.com"],
.article-detail iframe.haravan-widget,
.article-detail iframe[src*="haravanwidgets"],
.article-detail iframe[nosrc*="haravanwidgets"],
.article-detail iframe[src*="onapp.haravan.com"],
.article-detail iframe[nosrc*="onapp.haravan.com"],
.catalogue-main-content iframe.haravan-widget,
.catalogue-main-content iframe[src*="haravanwidgets"],
.catalogue-main-content iframe[nosrc*="haravanwidgets"],
.catalogue-main-content iframe[src*="onapp.haravan.com"],
.catalogue-main-content iframe[nosrc*="onapp.haravan.com"],
.page-content iframe.haravan-widget,
.page-content iframe[src*="haravanwidgets"],
.page-content iframe[nosrc*="haravanwidgets"],
.page-content iframe[src*="onapp.haravan.com"],
.page-content iframe[nosrc*="onapp.haravan.com"],
.entry-content iframe.haravan-widget,
.entry-content iframe[src*="haravanwidgets"],
.entry-content iframe[nosrc*="haravanwidgets"],
.entry-content iframe[src*="onapp.haravan.com"],
.entry-content iframe[nosrc*="onapp.haravan.com"],
.desc-content iframe.haravan-widget,
.desc-content iframe[src*="haravanwidgets"],
.desc-content iframe[nosrc*="haravanwidgets"],
.desc-content iframe[src*="onapp.haravan.com"],
.desc-content iframe[nosrc*="onapp.haravan.com"],
.pro-desc iframe.haravan-widget,
.pro-desc iframe[src*="haravanwidgets"],
.pro-desc iframe[nosrc*="haravanwidgets"],
.pro-desc iframe[src*="onapp.haravan.com"],
.pro-desc iframe[nosrc*="onapp.haravan.com"],
.rte iframe.haravan-widget,
.rte iframe[src*="haravanwidgets"],
.rte iframe[nosrc*="haravanwidgets"],
.rte iframe[src*="onapp.haravan.com"],
.rte iframe[nosrc*="onapp.haravan.com"],
#article-main-content iframe.haravan-widget,
#article-main-content iframe[src*="haravanwidgets"],
#article-main-content iframe[nosrc*="haravanwidgets"],
#article-main-content iframe[src*="onapp.haravan.com"],
#article-main-content iframe[nosrc*="onapp.haravan.com"],
iframe.haravan-widget,
iframe[src*="haravanwidgets"],
iframe[nosrc*="haravanwidgets"],
iframe[src*="onapp.haravan.com"],
iframe[nosrc*="onapp.haravan.com"] {
    width: 100% !important;
    max-width: 500px !important;
    height: 560px !important;
    min-height: 520px !important;
    max-height: 600px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    border: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 540px) {
    .text-content iframe[src*="haravanwidgets"],
    .text-content iframe[nosrc*="haravanwidgets"],
    .text-content iframe[src*="onapp.haravan.com"],
    .text-content iframe[nosrc*="onapp.haravan.com"],
    iframe.haravan-widget {
        max-width: 100% !important;
        height: 520px !important;
    }
}

/* Parent paragraph centering for Haravan widgets */
p:has(> iframe.haravan-widget),
p:has(> span > iframe.haravan-widget),
p:has(> iframe[nosrc*="haravanwidgets"]),
p:has(> span > iframe[nosrc*="haravanwidgets"]),
p:has(> iframe[src*="haravanwidgets"]),
p:has(> span > iframe[src*="haravanwidgets"]) {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* For PDF embed iframe, provide comfortable reading height */
.text-content iframe[src*="pdf"],
.text-content iframe[src*="drive.google"],
.catalogue-main-content iframe[src*="pdf"],
.catalogue-main-content iframe[src*="drive.google"],
.text-content iframe[src*="catalogue"],
.catalogue-main-content iframe {
    min-height: 750px;
}

/* For YouTube & Video embed iframes, maintain responsive 16:9 aspect ratio and correct height */
.text-content iframe[src*="youtube.com"],
.text-content iframe[src*="youtube-nocookie.com"],
.text-content iframe[src*="youtu.be"],
.text-content iframe[src*="vimeo.com"],
.text-content iframe[src*="dailymotion.com"],
.text-content-container iframe[src*="youtube.com"],
.text-content-container iframe[src*="youtube-nocookie.com"],
.text-content-container iframe[src*="youtu.be"],
.text-content-container iframe[src*="vimeo.com"],
.text-content-container iframe[src*="dailymotion.com"],
.catalogue-main-content iframe[src*="youtube.com"],
.catalogue-main-content iframe[src*="youtube-nocookie.com"],
.catalogue-main-content iframe[src*="youtu.be"],
.catalogue-main-content iframe[src*="vimeo.com"],
.catalogue-main-content iframe[src*="dailymotion.com"],
.article-detail iframe[src*="youtube.com"],
.article-detail iframe[src*="youtube-nocookie.com"],
.article-detail iframe[src*="youtu.be"],
.article-detail iframe[src*="vimeo.com"],
.article-detail iframe[src*="dailymotion.com"],
.page-content iframe[src*="youtube.com"],
.page-content iframe[src*="youtube-nocookie.com"],
.page-content iframe[src*="youtu.be"],
.page-content iframe[src*="vimeo.com"],
.page-content iframe[src*="dailymotion.com"],
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo.com"],
.entry-content iframe[src*="dailymotion.com"],
.desc-content iframe[src*="youtube.com"],
.desc-content iframe[src*="youtube-nocookie.com"],
.desc-content iframe[src*="youtu.be"],
.desc-content iframe[src*="vimeo.com"],
.desc-content iframe[src*="dailymotion.com"],
.pro-desc iframe[src*="youtube.com"],
.pro-desc iframe[src*="youtube-nocookie.com"],
.pro-desc iframe[src*="youtu.be"],
.pro-desc iframe[src*="vimeo.com"],
.pro-desc iframe[src*="dailymotion.com"],
.rte iframe[src*="youtube.com"],
.rte iframe[src*="youtube-nocookie.com"],
.rte iframe[src*="youtu.be"],
.rte iframe[src*="vimeo.com"],
.rte iframe[src*="dailymotion.com"],
#article-main-content iframe[src*="youtube.com"],
#article-main-content iframe[src*="youtube-nocookie.com"],
#article-main-content iframe[src*="youtu.be"],
#article-main-content iframe[src*="vimeo.com"],
#article-main-content iframe[src*="dailymotion.com"],
#product-desc-content iframe[src*="youtube.com"],
#product-desc-content iframe[src*="youtube-nocookie.com"],
#product-desc-content iframe[src*="youtu.be"],
#product-desc-content iframe[src*="vimeo.com"],
#product-desc-content iframe[src*="dailymotion.com"],
.overview-description iframe[src*="youtube.com"],
.overview-description iframe[src*="youtube-nocookie.com"],
.overview-description iframe[src*="youtu.be"],
.overview-description iframe[src*="vimeo.com"],
.content-detail-body iframe[src*="youtube.com"],
.content-detail-body iframe[src*="youtube-nocookie.com"],
.content-detail-body iframe[src*="youtu.be"],
.content-detail-body iframe[src*="vimeo.com"] {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 360px;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    display: block !important;
}

@media (max-width: 768px) {
    .text-content iframe[src*="youtube.com"],
    .text-content iframe[src*="youtube-nocookie.com"],
    .text-content iframe[src*="youtu.be"],
    .text-content iframe[src*="vimeo.com"],
    .text-content iframe[src*="dailymotion.com"],
    .text-content-container iframe[src*="youtube.com"],
    .text-content-container iframe[src*="youtube-nocookie.com"],
    .text-content-container iframe[src*="youtu.be"],
    .text-content-container iframe[src*="vimeo.com"],
    .text-content-container iframe[src*="dailymotion.com"],
    .catalogue-main-content iframe[src*="youtube.com"],
    .catalogue-main-content iframe[src*="youtube-nocookie.com"],
    .catalogue-main-content iframe[src*="youtu.be"],
    .catalogue-main-content iframe[src*="vimeo.com"],
    .catalogue-main-content iframe[src*="dailymotion.com"],
    .article-detail iframe[src*="youtube.com"],
    .article-detail iframe[src*="youtube-nocookie.com"],
    .article-detail iframe[src*="youtu.be"],
    .article-detail iframe[src*="vimeo.com"],
    .article-detail iframe[src*="dailymotion.com"],
    .page-content iframe[src*="youtube.com"],
    .page-content iframe[src*="youtube-nocookie.com"],
    .page-content iframe[src*="youtu.be"],
    .page-content iframe[src*="vimeo.com"],
    .page-content iframe[src*="dailymotion.com"],
    .entry-content iframe[src*="youtube.com"],
    .entry-content iframe[src*="youtube-nocookie.com"],
    .entry-content iframe[src*="youtu.be"],
    .entry-content iframe[src*="vimeo.com"],
    .entry-content iframe[src*="dailymotion.com"],
    .desc-content iframe[src*="youtube.com"],
    .desc-content iframe[src*="youtube-nocookie.com"],
    .desc-content iframe[src*="youtu.be"],
    .desc-content iframe[src*="vimeo.com"],
    .desc-content iframe[src*="dailymotion.com"],
    .pro-desc iframe[src*="youtube.com"],
    .pro-desc iframe[src*="youtube-nocookie.com"],
    .pro-desc iframe[src*="youtu.be"],
    .pro-desc iframe[src*="vimeo.com"],
    .pro-desc iframe[src*="dailymotion.com"],
    .rte iframe[src*="youtube.com"],
    .rte iframe[src*="youtube-nocookie.com"],
    .rte iframe[src*="youtu.be"],
    .rte iframe[src*="vimeo.com"],
    .rte iframe[src*="dailymotion.com"],
    #article-main-content iframe[src*="youtube.com"],
    #article-main-content iframe[src*="youtube-nocookie.com"],
    #article-main-content iframe[src*="youtu.be"],
    #article-main-content iframe[src*="vimeo.com"],
    #article-main-content iframe[src*="dailymotion.com"],
    #product-desc-content iframe[src*="youtube.com"],
    #product-desc-content iframe[src*="youtube-nocookie.com"],
    #product-desc-content iframe[src*="youtu.be"],
    #product-desc-content iframe[src*="vimeo.com"],
    #product-desc-content iframe[src*="dailymotion.com"],
    .overview-description iframe[src*="youtube.com"],
    .overview-description iframe[src*="youtube-nocookie.com"],
    .overview-description iframe[src*="youtu.be"],
    .overview-description iframe[src*="vimeo.com"],
    .content-detail-body iframe[src*="youtube.com"],
    .content-detail-body iframe[src*="youtube-nocookie.com"],
    .content-detail-body iframe[src*="youtu.be"],
    .content-detail-body iframe[src*="vimeo.com"] {
        min-height: 200px;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* Responsive Video Wrapper (16:9 Aspect Ratio) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25% !important; /* 16:9 */
    padding-top: 25px;
    height: 0 !important;
    max-width: 100%;
    margin: 30px auto !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    background: #000;
    clear: both;
}
.video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    max-height: unset !important;
    aspect-ratio: unset !important;
    border: none !important;
    border-radius: 12px !important;
    margin: 0 !important;
}
@media (max-width: 768px) {
    .video-wrapper {
        margin: 20px auto !important;
        border-radius: 8px;
        padding-top: 0;
    }
    .video-wrapper iframe {
        border-radius: 8px !important;
    }
}

.text-content img,
.catalogue-main-content img,
#article-main-content img,
.about-hero-img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Brand Page Full Color & High Resolution Logos
   ========================================================================== */
.brand-logo-card img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

.brand-logo-card:hover img {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.06) !important;
}

/* Brand page: let each uploaded logo use the full card area. */
.brand-logo-card {
    padding: 0 !important;
    overflow: hidden !important;
}

.brand-logo-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Courses page: every instructor slide uses the same image frame. */
.course-page-main .ib-img-wrapper {
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    flex: 0 0 42% !important;
    overflow: hidden !important;
}

.course-page-main .ib-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (max-width: 991px) {
    .course-page-main .ib-img-wrapper {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        flex: 0 0 300px !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   Article, Blog & Project Content Tables (Borderless & Clean Soft Hierarchy)
   ========================================================================== */
.text-content table,
.catalogue-main-content table,
#article-main-content table,
.page-content-wrapper table,
.blog-content table,
.article-detail-content table,
.category-main table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    margin: 25px 0 !important;
    background: transparent !important;
}

.text-content table tr,
.catalogue-main-content table tr,
#article-main-content table tr,
.page-content-wrapper table tr,
.blog-content table tr,
.article-detail-content table tr,
.category-main table tr {
    border: none !important;
    background: transparent !important;
}

.text-content table th,
.catalogue-main-content table th,
#article-main-content table th,
.page-content-wrapper table th,
.blog-content table th,
.article-detail-content table th,
.category-main table th {
    border: none !important;
    background-color: #F4F6F8 !important;
    color: var(--dark-bg, #1a1a1a) !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-size: 0.95rem !important;
}

.text-content table td,
.catalogue-main-content table td,
#article-main-content table td,
.page-content-wrapper table td,
.blog-content table td,
.article-detail-content table td,
.category-main table td {
    border: none !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    background: transparent !important;
}

/* If table contains images (e.g. 3 columns gallery layout) */
.text-content table td img,
.catalogue-main-content table td img,
#article-main-content table td img,
.page-content-wrapper table td img,
.blog-content table td img,
.article-detail-content table td img,
.category-main table td img {
    border: none !important;
    border-radius: 8px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.text-content table td img:hover,
.catalogue-main-content table td img:hover,
#article-main-content table td img:hover,
.page-content-wrapper table td img:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   Brand Marquee (Individual Brand Logos)
   ========================================================================== */
.brand-marquee-container {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 15px 0 !important;
    background: transparent !important;
}
.brand-marquee-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    animation: scrollBrands 35s linear infinite !important;
    will-change: transform !important;
}
.brand-marquee-track:hover {
    animation-play-state: paused !important;
}
.brand-marquee-group {
    display: flex !important;
    align-items: center !important;
    gap: 65px !important;
    padding-right: 65px !important;
    flex-shrink: 0 !important;
}
.brand-marquee-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 135px !important;
    padding: 0 15px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.brand-marquee-item:hover {
    transform: scale(1.08) !important;
}
.brand-marquee-item .brand-item-img {
    max-height: 120px !important;
    max-width: 260px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    display: block !important;
}
@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 991px) {
    .brand-marquee-group {
        gap: 45px !important;
        padding-right: 45px !important;
    }
    .brand-marquee-item {
        height: 110px !important;
        padding: 0 10px !important;
    }
    .brand-marquee-item .brand-item-img {
        max-height: 95px !important;
        max-width: 210px !important;
    }
}

@media (max-width: 767px) {
    .brand-marquee-group {
        gap: 35px !important;
        padding-right: 35px !important;
    }
    .brand-marquee-item {
        height: 85px !important;
        padding: 0 8px !important;
    }
    .brand-marquee-item .brand-item-img {
        max-height: 72px !important;
        max-width: 160px !important;
    }
}

/* ==========================================================================
   Footer Social & E-Commerce Buttons
   ========================================================================== */
.footer-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}
.footer-social-btn:hover {
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
}
.footer-social-btn.btn-fb { background: #1877f2 !important; }
.footer-social-btn.btn-zalo-footer { background: #0068ff !important; font-weight: 800 !important; font-size: 0.75rem !important; }
.footer-social-btn.btn-yt { background: #FF0000 !important; }
.footer-social-btn.btn-shopee { background: #EE4D2D !important; font-size: 0.95rem !important; }
.footer-social-btn.btn-lazada { background: #0f146d !important; font-size: 0.95rem !important; }
.footer-social-btn.btn-tiktok { background: #000000 !important; }
.footer-social-btn.btn-insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; }
.footer-social-img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: inline-block !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Blog, Article & Page Layout Side Margins (1200px Old Website Standard)
   ========================================================================== */
body.template-blog .container,
body.template-article .container,
body.template-page .container,
.blog-page-main .container,
.project-page-main .container,
.catalogue-page-main .container,
.wrapper.main-content,
.main-content .wrapper,
#breadcrumb-wrapper .wrapper,
.page-article {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

body.template-blog .breadcrumb,
body.template-article .breadcrumb,
body.template-page .breadcrumb,
.blog-page-main .breadcrumb,
.breadcrumb.container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

body.template-blog .category-layout,
.blog-page-main .category-layout {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.text-content-container,
.page-content-container,
.article-detail-container,
.page-article,
.rte.section-content {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.text-content,
.rte.section-content,
.article-detail {
    max-width: 100% !important;
    line-height: 1.8 !important;
}

.text-content img,
.rte.section-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   Modern Clean Table Styling (Borderless with Alternating Soft Zebra Colors)
   Phân cấp màu sắc mềm mại, không viền khung cứng, chuẩn giao diện sang trọng
   ========================================================================== */
.table-responsive-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 30px 0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

.text-content table,
.rte table,
.section-content table,
.catalogue-main-content table,
#article-main-content table,
.page-content-wrapper table,
.blog-content table,
.article-detail-content table {
    width: 100% !important;
    min-width: 600px;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    background: #ffffff !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
}

.text-content table thead tr,
.rte table thead tr,
.section-content table thead tr,
#article-main-content table thead tr,
.article-detail-content table thead tr,
.catalogue-main-content table thead tr {
    background-color: #F1F4F8 !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

.text-content table thead th,
.text-content table thead td,
.rte table thead th,
.rte table thead td,
.section-content table thead td,
.section-content table thead th,
#article-main-content table thead td,
#article-main-content table thead th,
.article-detail-content table thead td,
.article-detail-content table thead th {
    padding: 16px 20px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    font-size: 0.95rem !important;
    border: none !important;
    letter-spacing: 0.2px;
    vertical-align: middle !important;
}

.text-content table tbody tr:nth-child(even),
.rte table tbody tr:nth-child(even),
.section-content table tbody tr:nth-child(even),
#article-main-content table tbody tr:nth-child(even),
.article-detail-content table tbody tr:nth-child(even),
.catalogue-main-content table tbody tr:nth-child(even) {
    background-color: #F8FAFC !important;
}

.text-content table tbody tr:nth-child(odd),
.rte table tbody tr:nth-child(odd),
.section-content table tbody tr:nth-child(odd),
#article-main-content table tbody tr:nth-child(odd),
.article-detail-content table tbody tr:nth-child(odd),
.catalogue-main-content table tbody tr:nth-child(odd) {
    background-color: #FFFFFF !important;
}

.text-content table tbody tr:hover,
.rte table tbody tr:hover,
.section-content table tbody tr:hover,
#article-main-content table tbody tr:hover {
    background-color: #EEF3F9 !important;
    transition: background-color 0.15s ease-in-out;
}

.text-content table td,
.text-content table th,
.rte table td,
.rte table th,
.section-content table td,
.section-content table th,
.catalogue-main-content table td,
#article-main-content table td,
#article-main-content table th,
.page-content-wrapper table td,
.article-detail-content table td {
    padding: 14px 20px !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    width: auto !important;
}

.text-content table td:first-child,
.rte table td:first-child,
.section-content table td:first-child,
#article-main-content table td:first-child {
    font-weight: 600 !important;
    color: #0F172A !important;
    width: auto !important;
}

.text-content table tr:last-child td,
.rte table tr:last-child td,
.section-content table tr:last-child td {
    border-bottom: none !important;
}

/* ==========================================================================
   Article & Blog Image Grid Layout (Converted from Content Tables)
   Mobile: 1 ảnh / 1 hàng hiển thị dọc xuống
   Desktop: Lưới ảnh đa cột cân đối, không viền bảng, không scrollbar thừa
   ========================================================================== */
.article-image-grid-layout {
    display: grid !important;
    grid-template-columns: repeat(var(--grid-cols, 2), 1fr) !important;
    gap: 16px !important;
    margin: 25px 0 !important;
    width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.article-image-grid-layout .article-image-item {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.article-image-grid-layout .article-image-item p {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

.article-image-grid-layout .article-image-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Reset bảng nếu có chứa ảnh để không bị vỡ giao diện trước khi JS chạy */
.text-content table:has(img),
.rte table:has(img),
.section-content table:has(img),
.catalogue-main-content table:has(img),
#article-main-content table:has(img),
.page-content-wrapper table:has(img),
.blog-content table:has(img),
.article-detail-content table:has(img),
table.table-has-images {
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    /* Mobile: 1 ảnh/hàng, hiển thị dọc xuống */
    .article-image-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 !important;
    }
    
    .article-image-grid-layout .article-image-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        display: block !important;
    }
    
    .article-image-grid-layout .article-image-item img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
    }

    /* Fallback cho table chứa ảnh trên Mobile */
    .rte table:has(img),
    .text-content table:has(img),
    .section-content table:has(img),
    table.table-has-images {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .rte table:has(img) tbody,
    .text-content table:has(img) tbody,
    .section-content table:has(img) tbody,
    table.table-has-images tbody {
        display: block !important;
        width: 100% !important;
    }
    .rte table:has(img) tr,
    .text-content table:has(img) tr,
    .section-content table:has(img) tr,
    table.table-has-images tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        border: none !important;
    }
    .rte table:has(img) td,
    .text-content table:has(img) td,
    .section-content table:has(img) td,
    table.table-has-images td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        border: none !important;
    }
    .rte table:has(img) td img,
    .text-content table:has(img) td img,
    .section-content table:has(img) td img,
    table.table-has-images td img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
    }
}

/* ==========================================================================
   Course Month Title Mobile Sizing (Tối đa rớt 2 hàng trên Mobile)
   ========================================================================== */
.course-month-heading {
    font-family: var(--font-main, 'Montserrat', sans-serif);
    font-weight: 700;
}

.month-txt-nowrap,
.year-txt-nowrap {
    white-space: nowrap !important;
    display: inline-block !important;
}

@media (max-width: 768px) {
    .course-month-summary {
        padding: 16px 14px !important;
        gap: 10px !important;
    }

    .course-month-title {
        gap: 10px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .course-month-number {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        font-size: 0.95rem !important;
    }

    .course-month-title > div {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .course-month-title h3,
    .course-month-heading {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .course-month-title p {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
    }

    .course-month-toggle {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }
}

/* Khoảng cách giữa sidebar với section One-on-one consultation trên trang danh mục */
.collection-page-main .category-layout,
.collection-category-layout,
.sidebar-accordion,
.sidebar,
.sidebar-navigation,
.collection-sidebar {
    margin-bottom: 60px !important;
}

.consultation-section,
.registerforemail {
    margin-top: 60px !important;
}

@media (max-width: 768px) {
    .collection-page-main .category-layout,
    .collection-category-layout,
    .sidebar-accordion,
    .sidebar,
    .sidebar-navigation,
    .collection-sidebar {
        margin-bottom: 40px !important;
    }

    .consultation-section,
    .registerforemail {
        margin-top: 40px !important;
    }
}

/* Đồng bộ tiêu đề tất cả các trang trong mục Dịch vụ thành màu đen */
.template-blog h1.page-title-center,
.template-blog .section-heading h1,
.page-article .section-heading h1,
#blog-service-content ~ h1,
.text-content-container h1.page-title-center,
h1.page-title-center {
    color: #1a1a1a !important;
}

/* Căn giữa hình ảnh trong mô tả sản phẩm (Product Description Images Centering) */
.desc-content img,
#product-desc-content img,
.product-desc-section .desc-content img,
.product-description img,
.product-detail img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block !important;
    margin: 20px auto !important;
}

.desc-content [style*="text-align: left"] img,
.desc-content [style*="text-align:left"] img,
#product-desc-content [style*="text-align: left"] img,
#product-desc-content [style*="text-align:left"] img {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.desc-content [style*="text-align: right"] img,
.desc-content [style*="text-align:right"] img,
#product-desc-content [style*="text-align: right"] img,
#product-desc-content [style*="text-align:right"] img {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.desc-content table img,
#product-desc-content table img {
    display: inline-block !important;
    margin: 0 !important;
}

/* ==========================================================================
   Consultation Section V2 Form Overrides (Đăng Ký Tư Vấn 1-1)
   ========================================================================== */
.consultation-section-v2 {
    background-color: #f4f1ea !important;
}

.consultation-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: start !important;
    width: 100% !important;
}

.consultation-grid::before,
.consultation-grid::after {
    display: none !important;
    content: none !important;
}

.consultation-left {
    max-width: 500px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.consultation-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
}

.consultation-section-v2 .contact-form,
.consultation-right form,
.consultation-right .contact-form,
#consultation-section .contact-form {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

.consultation-section-v2 .consultation-form-v2,
.consultation-right .consultation-form-v2,
.consultation-right form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
}

.consultation-section-v2 .form-row,
.consultation-right .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
}

.consultation-section-v2 .form-group,
.consultation-right .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.consultation-section-v2 label,
.consultation-right label {
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: block !important;
    margin-bottom: 0 !important;
    line-height: normal !important;
}

.consultation-section-v2 label span.req,
.consultation-right label span.req {
    color: #888888 !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    margin-left: 5px !important;
}

.consultation-section-v2 input[type="text"],
.consultation-section-v2 input[type="tel"],
.consultation-section-v2 input[type="email"],
.consultation-right input[type="text"],
.consultation-right input[type="tel"],
.consultation-right input[type="email"],
.consultation-right input {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #a0a0a0 !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-size: 1rem !important;
    color: #1a1a1a !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    transition: border-color 0.2s ease !important;
}

.consultation-section-v2 textarea,
.consultation-right textarea {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #a0a0a0 !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-size: 1rem !important;
    color: #1a1a1a !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    min-height: 100px !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease !important;
}

.consultation-section-v2 input:focus,
.consultation-section-v2 textarea:focus,
.consultation-right input:focus,
.consultation-right textarea:focus {
    border-color: var(--primary-color, #E08B68) !important;
}

.consultation-section-v2 input::placeholder,
.consultation-section-v2 textarea::placeholder,
.consultation-right input::placeholder,
.consultation-right textarea::placeholder {
    color: #8e8e8e !important;
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-size: 0.95rem !important;
    opacity: 1 !important;
}

.consultation-section-v2 .btn-send-consult,
.consultation-right .btn-send-consult {
    background-color: var(--primary-color, #E08B68) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 13px 38px !important;
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    align-self: flex-start !important;
    margin-top: 10px !important;
    width: auto !important;
    display: inline-block !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.consultation-section-v2 .btn-send-consult:hover,
.consultation-right .btn-send-consult:hover {
    background-color: #d88761 !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .consultation-section-v2 {
        padding: 50px 0 !important;
    }
    .consultation-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
    .consultation-left {
        max-width: 100% !important;
    }
    .consultation-section-v2 .form-row,
    .consultation-right .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .consultation-section-v2 .btn-send-consult,
    .consultation-right .btn-send-consult {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   Shared Pre-Footer Consultation Bar (One-on-one consultation)
   ========================================================================== */
.consultation-section.shared-consultation-bar,
.shared-consultation-bar {
    background-color: #f4f1ea !important;
    padding: 70px 0 !important;
    margin-top: 60px !important;
    width: 100% !important;
}
.consultation-shared-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100% !important;
}
.consultation-shared-inner::before,
.consultation-shared-inner::after {
    display: none !important;
    content: none !important;
}
.consultation-shared-title {
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 2.2rem !important;
    color: #1a1a1a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}
.consultation-shared-subtitle {
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    color: #666666 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.consultation-form-shared-wrap {
    flex-shrink: 0 !important;
    width: 460px !important;
    max-width: 100% !important;
}
.consultation-form-shared-wrap form,
.consultation-form-shared-wrap .contact-form,
.shared-consultation-bar .contact-form,
.shared-consultation-bar form {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
}
.consultation-pill-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #c2bbb0 !important;
    border-radius: 35px !important;
    padding: 5px 6px 5px 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.consultation-pill-box:focus-within {
    border-color: var(--primary-color, #E08B68) !important;
    box-shadow: 0 0 0 3px rgba(224, 139, 104, 0.18) !important;
}
.consult-pill-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-size: 0.95rem !important;
    color: #1a1a1a !important;
    padding: 10px 12px 10px 0 !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}
.consult-pill-input::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}
.btn-consult-pill {
    background-color: var(--primary-color, #E08B68) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    font-family: var(--font-main, 'Montserrat', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.btn-consult-pill:hover {
    background-color: #d87e59 !important;
    transform: translateY(-1px) !important;
}

/* Wishlist icon and product action layout */
.product-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 15px;
    overflow: visible;
}

.product-actions .btn-add-to-cart,
.product-actions .btn-contact {
    flex: 1 1 190px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.product-actions .wishlist-toggle {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    color: #d7d7d7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.product-actions .wishlist-toggle i {
    font-size: 1.15rem;
    font-weight: 400;
}

.product-actions .wishlist-toggle:hover,
.product-actions .wishlist-toggle:focus-visible {
    color: #c7c7c7;
    border-color: #d5d5d5;
    background: #fafafa;
    transform: translateY(-1px);
    outline: none;
}

.product-actions .wishlist-toggle.is-active {
    color: #ef5a5a;
    border-color: rgba(239, 90, 90, 0.35);
    background: #fff5f5;
}

.product-actions .wishlist-toggle.is-active i {
    color: #ef5a5a;
    font-weight: 900;
}

/* Saved-products page */
.wishlist-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0 30px;
}

.wishlist-eyebrow {
    margin: 0 0 6px;
    color: #999;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.wishlist-clear-btn,
.wishlist-card-remove {
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #777;
    cursor: pointer;
}

.wishlist-clear-btn {
    padding: 10px 18px;
    border-radius: 24px;
    white-space: nowrap;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.wishlist-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
}

.wishlist-card-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    padding: 16px;
    background: #fafafa;
}

.wishlist-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wishlist-card-body {
    position: relative;
    padding: 16px;
}

.wishlist-card-title {
    display: block;
    padding-right: 30px;
    color: #222;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.wishlist-card-price {
    margin: 8px 0 0;
    color: var(--primary-color, #EFA688);
    font-weight: 700;
}

.wishlist-card-remove {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
}

.wishlist-empty[hidden] {
    display: none;
}

@media (max-width: 991px) {
    .wishlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .product-actions .btn-add-to-cart,
    .product-actions .btn-contact {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.2 !important;
    }

    .product-actions .wishlist-toggle {
        align-self: center;
    }
}

/* Header wishlist: match the language/cart circular utility icons. */
.wishlist-header-link {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    color: #555;
    font-size: 0.75rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.wishlist-header-link:hover,
.wishlist-header-link:focus-visible {
    color: var(--primary-color, #EFA688);
    border-color: rgba(239, 166, 136, 0.45);
    background: #fffaf8;
    outline: none;
}

.wishlist-header-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.wishlist-header-count[hidden] {
    display: none;
}

/* Kitchen showcase hotspots: smaller points with a stronger attention ring. */
.hotspot-section .hotspot-dot {
    width: 14px !important;
    height: 14px !important;
    background: #e78a63 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 8px rgba(70, 40, 25, 0.28) !important;
    transform: translate(-50%, -50%) !important;
}

.hotspot-section .hotspot-dot::before {
    content: '' !important;
    position: absolute !important;
    inset: -8px !important;
    border: 2px solid rgba(231, 138, 99, 0.9) !important;
    border-radius: 50% !important;
    background: rgba(231, 138, 99, 0.16) !important;
    box-shadow: 0 0 0 5px rgba(231, 138, 99, 0.12), 0 0 18px rgba(231, 138, 99, 0.75) !important;
    animation: kitchen-hotspot-ring 2s ease-out infinite !important;
    pointer-events: none !important;
}

.hotspot-section .hotspot-dot::after {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    background: transparent !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.hotspot-section .hotspot-dot:hover,
.hotspot-section .hotspot-dot.active {
    transform: translate(-50%, -50%) scale(1.12) !important;
    background: #df7048 !important;
}

.hotspot-section .hotspot-dot:hover::before,
.hotspot-section .hotspot-dot.active::before {
    border-color: rgba(231, 138, 99, 1) !important;
    box-shadow: 0 0 0 5px rgba(231, 138, 99, 0.2), 0 0 22px rgba(231, 138, 99, 0.95) !important;
}

@keyframes kitchen-hotspot-ring {
    0% {
        opacity: 0.95;
        transform: scale(0.72);
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

/* Footer social icons: larger touch targets and a clearly recognizable YouTube mark. */
.footer-social-btn {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
}

.footer-social-btn .footer-social-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.footer-social-btn.btn-yt {
    background: #ff0000 !important;
}

.footer-social-btn.btn-yt .footer-social-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 2rem !important;
    line-height: 1;
}

@media (max-width: 576px) {
    .footer-social-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .footer-social-btn.btn-yt .footer-social-icon {
        font-size: 1.65rem !important;
    }
}

/* About section awards: use three equal square tiles as in the reference. */
.about-bento .bento-img-row img {
    width: 80px !important;
    height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    flex: 0 0 80px !important;
}

@media (max-width: 991px) {
    .about-bento .bento-img-row img {
        width: 75px !important;
        height: 75px !important;
        flex-basis: 75px !important;
    }
}
.consult-alert-success {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
    padding: 12px 20px !important;
    border-radius: 25px !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-align: center !important;
}
@media (max-width: 991px) {
    .consultation-shared-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 25px !important;
    }
    .consultation-form-shared-wrap {
        width: 100% !important;
    }
}
@media (max-width: 768px) {
    .consultation-section.shared-consultation-bar,
    .shared-consultation-bar {
        padding: 50px 0 !important;
        margin-top: 40px !important;
    }
    .consultation-shared-title {
        font-size: 1.75rem !important;
    }
    .consultation-pill-box {
        padding: 4px 5px 4px 18px !important;
    }
    .btn-consult-pill {
        padding: 10px 22px !important;
        font-size: 0.9rem !important;
    }
}