/* Main CSS - Converted from Tailwind Sample */
:root {
    --color-primary: #f20d0d;
    --color-accent-gold: #d4af37;
    --color-bg-light: #fcf8f8;
    --color-bg-dark: #1c0d0d;
    --color-white: #ffffff;
    --color-black: #000000;
    --font-primary: 'Manrope', sans-serif;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-light);
    color: #1c0d0d;
    margin: 0;
    line-height: 1.5;
    scroll-padding-top: 0;
}

/* Utilities Container */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .container {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* Top Bar */
.top-bar {
    background-color: #121827;
    color: #ffffff;
    font-size: 0.8125rem;
    /* 13px */
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.tb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.tb-item .material-symbols-outlined {
    font-size: 1.125rem;
    color: var(--color-primary);
}

/* Red Dot Separator - Applied to items except the last one in a group, or maybe between valid items? 
   The prompt asked for "red dots separating content parts". 
   Let's add a dot AFTER each item, except the last child. 
*/
.tb-item:not(:last-child)::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 50%;
    position: absolute;
    right: -0.85rem;
    /* half of 1.5rem gap approx */
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    /* Hide on mobile? User didn't specify, but usually top bar is desktop only or simplified. Address is long. Let's hide or stack? Request was "Add frame above...". Usually hidden on mobile to save space. I'll hide it on small screens for now unless requested otherwise. */
    /* Re-reading request: "Bổ sung thêm một khung phía trên...". No mention of responsive. 
       The content is quite long "Số Nhà 78...". It looks bad on mobile. 
       I will set it to display: block but maybe stack or hide. 
       Let's keep it visible but stacked if needed, or hide text?
       Given the length, I'll ensure it wraps nicely.
    */
    .top-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .tb-item:not(:last-child)::after {
        display: none;
        /* No dots on mobile stack */
    }
}

/* Header */
.site-header {
    position: relative;
    z-index: 50;
    background: #fff;
    border-bottom: none;
    padding: 1rem 0;
}



.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.brand-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-primary);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.logo-img {
    height: 60px;
    transition: height 0.3s ease;
}

.site-header.scrolled .logo-img {
    height: 40px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.brand-tag {
    color: var(--color-primary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Nav */
.main-nav {
    display: none;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav li {
    display: inline-block;
}

.main-nav a {
    text-decoration: none !important;
    border-bottom: none !important;
    color: #333;
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
    /* Changed from uppercase to match Button */
    transition: color 0.2s;
    padding: 0.5rem 0;
    position: relative;
}

/* Force hide Contact link if present */
.main-nav a[href*="lien-he"] {
    display: none !important;
}

.main-nav a:hover {
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .main-nav {
        display: flex;
    }
}

/* CTA Header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-search {
    display: none;
    align-items: center;
    background: #f3f4f6;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
}

.header-search input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    width: 12rem;
}

@media (min-width: 768px) {
    .header-search {
        display: flex;
    }
}

.btn-primary {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-primary);
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(242, 13, 13, 0.2);
    min-height: 44px;
    /* Touch target */
}

.btn-primary:hover {
    transform: scale(1.05);
    background-color: #d30b0b;
}

/* Hero Boxed */
.hero-section {
    position: relative;
    /* Boxed layout handled by .container wrapper in HTML */
    background-color: transparent;
    padding: 0;
}

/* Header Utilities */
.header-left-group {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.brand-icon-size {
    font-size: 1.875rem;
}

.search-icon-color {
    color: #9ca3af;
}

.cta-icon-size {
    font-size: 1.125rem;
}

.mobile-brand-icon-color {
    color: var(--color-primary);
}

.btn-compact {
    padding: 0.25rem 0.75rem;
    min-height: 34px;
    height: 34px;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hero Swiper */
.hero-swiper {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.hero-slide-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Optional: Enforce aspect ratio if needed, e.g. aspect-ratio: 21/9; */
}

/* Swiper Nav Customization */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    background: #fff;
    transform: scale(1.1);
}

.hero-swiper .swiper-button-next:after,
.hero-swiper .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

.hero-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.7;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: var(--color-primary);
    opacity: 1;
}

/* USP */
.usp-section {
    position: relative;
    z-index: 20;
    margin-top: 2rem;
    padding-bottom: 3rem;
}

@media (max-width: 768px) {
    .usp-section {
        margin-top: -2rem;
        padding-bottom: 2rem;
    }
}

.usp-card {
    background: white;
    border-radius: 2.5rem;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.12);
    border: 1px solid #f3f4f6;
    padding: 2.5rem;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .usp-card {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }
}

.usp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media(min-width: 640px) {
    .usp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .usp-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .usp-item {
        border-right: 1px solid #f3f4f6;
    }

    .usp-item:last-child {
        border-right: none;
    }
}

.usp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 0 1rem;
}

.usp-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usp-icon.red {
    background-color: #fef2f2;
    color: var(--color-primary);
}

.usp-icon.gold {
    background-color: #fef2f2;
    color: var(--color-primary);
}

/* Section Common */
.section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .section {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.sect-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    /* Allow wrapping securely */
    gap: 1rem;
}

.sect-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sect-bar {
    width: 0.375rem;
    height: 2rem;
    background-color: var(--color-primary);
    border-radius: 9999px;
}

.sect-title {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    /* Prevent word break */
}

/* Product Placeholder Card */
.p-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    transition: all 0.3s;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.p-card:hover {
    box-shadow: var(--shadow-lg);
}

.p-img-wrap {
    position: relative;
    aspect-ratio: 1/1;
    background: #f9fafb;
    overflow: hidden;
}

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

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

.p-body {
    padding: 1.25rem;
    text-align: center;
}

.p-title {
    font-weight: 700;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    height: 3rem;
    overflow: hidden;
}

.p-price {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 1.125rem;
}

.p-price-old {
    color: #9ca3af;
    font-size: 0.875rem;
    text-decoration: line-through;
    display: block;
}

/* Grid */
.grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media(min-width: 640px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile Product Slider (Peek Effect) */
@media (max-width: 768px) {

    .grid-4,
    .ac-products-grid {
        /* Assuming plugin uses this or similar, general targeting */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
        margin: 0 -1rem;
        /* Break out */
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 1rem;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .grid-4::-webkit-scrollbar,
    .ac-products-grid::-webkit-scrollbar {
        display: none;
    }

    .grid-4>*,
    .ac-products-grid>* {
        flex: 0 0 85%;
        /* Peek effect */
        scroll-snap-align: center;
        width: 85%;
        max-width: 85%;
    }
}

/* Footer */
.site-footer {
    background-color: white;
    border-top: 1px solid #e5e7eb;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

@media(min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-heading {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: clamp(1rem, 3vw, 1.125rem);
    border-bottom: 1px solid var(--color-primary);
    /* Full width, thin red line */
    padding-bottom: 0.5rem;
    display: block;
    /* Ensure it takes full width */
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 1rem;
}

.footer-links a {
    text-decoration: none;
    color: #6b7280;
    font-size: 0.875rem;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
}

.footer-links a::before {
    content: '›';
    /* Chevron */
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1;
    margin-right: 0.5rem;
    font-weight: bold;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-links-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Material Icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Footer Widgets & Styling */
.footer-widget {
    margin-bottom: 2rem;
}

.widget-title {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
}

.widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--color-primary);
}

/* Social Icons */
.footer-social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: var(--color-primary);
    transform: translateY(-3px);
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

/* Logo White Filter */
.logo-white-filter {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Default Desktop Hero (Fallback to old style if needed, or keeping consistency?)
   Let's update Desktop to match this logic for consistency, or keep old full height?
   User asked "responsive toàn bộ", usually implies consistency.
   But desktop usually needs full height.
   For now, we applied the new logic to MOBILE media query only in previous steps.
   Wait, the block above is inside @media (max-width: 639px).
   We need to make sure Desktop handles the new HTML structure correctly too.
*/

/* Desktop Styles for new structure */
.hero-section {
    position: relative;
    /* On desktop we might want cover if image is too small?
       But 'natural' implies image is big enough. */
}

.hero-img-natural {
    width: 100%;
    height: auto;
    display: block;
}

.hero-wrapper {
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    /* Desktop centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: white;
}

/* Partners Section */
.partners-section {
    background-color: white;
    overflow: hidden;
}

.partners-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.partners-slider {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    flex: 1;
}

.partners-track {
    display: flex;
    gap: 3rem;
    width: fit-content;
    transition: transform 0.3s ease;
    user-select: none;
}

.partner-item {
    flex: 0 0 auto;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.partner-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s;
}

.partner-placeholder {
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 1rem;
}

/* Navigation Buttons */
.partner-nav {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: white;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.partner-nav:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fef2f2;
    transform: scale(1.1);
}

.partner-nav:active {
    transform: scale(0.95);
}

.partner-nav .material-symbols-outlined {
    font-size: 1.5rem;
}

@media (max-width: 768px) {

    /* Compact Footer */
    .site-footer {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .footer-grid {
        gap: 2rem;
    }

    .footer-heading {
        margin-bottom: 0.75rem;
        font-size: 1rem;
    }

    .footer-links li {
        margin-bottom: 0.5rem;
    }

    /* Partners - Make smaller */
    .partners-section {
        padding: 2rem 0;
        /* Reduced vertical space */
    }

    .partner-item {
        width: 100px;
        height: 60px;
    }

    /* Section Spacing - Global Mobile Reduction */
    .section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sect-header {
        margin-bottom: 1.5rem;
        flex-direction: row;
        /* Keep row layout */
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
        /* Prevent breaking if possible, or handle carefully */
    }

    .sect-title-group {
        flex: 1;
        /* Allow taking space */
        min-width: 0;
        /* Flex fix */
    }

    .sect-title {
        font-size: 1.25rem;
        /* Smaller mobile title */
        white-space: nowrap;
        /* Force single line as requested */
        line-height: 1.2;
    }

    /* Force 'View All' button to not break layout */
    .sect-header .btn-primary,
    .sect-header a.btn-primary {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .sect-bar {
        height: 1.5rem;
        width: 0.25rem;
    }

    .partners-track {
        gap: 2rem;
    }

    .partner-nav {
        width: 40px;
        height: 40px;
    }

    .partner-nav .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .partners-slider-wrapper {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .partner-nav {
        display: none;
    }
}

/* AJAX Search Results */

/* Header Search Fix */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    background: #f3f4f6;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    width: 100%;
    max-width: 400px;
}

.header-search input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    padding-left: 0.5rem;
}

.ajax-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    margin-top: 0.5rem;
    display: none;
    overflow: hidden;
}

.ajax-search-results.active {
    display: block;
}

ul.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result-item {
    list-style: none;
    border-bottom: 1px solid #f3f4f6;
}

.search-result-item a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
    gap: 0.75rem;
}

.search-result-item a:hover {
    background-color: #f9fafb;
}

.search-thumb {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.5rem;
}

.search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-info {
    flex: 1;
    min-width: 0;
}

.search-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-price {
    font-size: 0.8125rem;
    color: var(--color-primary);
    font-weight: 700;
}

.search-loading,
.no-results {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.search-footer {
    padding: 0.75rem 1rem;
    text-align: center;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
}

.search-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.search-footer a:hover {
    text-decoration: underline;
}

/* Mobile Menu Search Results (shares same styling as desktop) */
.grifow-search-results {
    /* Container already styled inline in header.php, just ensure content styles work */
    max-height: 300px;
    overflow-y: auto;
}

.grifow-search-results .search-results-list,
.grifow-search-results .search-loading,
.grifow-search-results .no-results,
.grifow-search-results .search-footer {
    /* Inherit all styles from above */
}


/* ==========================================================================
   MOBILE & TABLET OPTIMIZATION
   Strictly scoped to max-width: 1023px (Tablet & Mobile)
   ========================================================================== */

/* ==========================================================================
   COMPONENT: Mobile Offcanvas Menu (Professional)
   ========================================================================== */

.mobile-offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    /* Let clicks pass through when closed */
}

/* State: Open */
.mobile-offcanvas-menu.is-open {
    pointer-events: auto;
}

/* Overlay */
.mobile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.mobile-offcanvas-menu.is-open .mobile-overlay {
    opacity: 1;
    visibility: visible;
}

/* Panel */
.mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: white;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mobile-offcanvas-menu.is-open .mobile-panel {
    transform: translateX(0);
}

/* Panel Header */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
}

.mobile-brand {
    font-weight: 800;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #111;
}

.mobile-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
}

.mobile-close-btn:hover {
    background: #fef2f2;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Panel Body */
.mobile-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Menu List Styles */
.mobile-menu-list {
    display: block;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-list li {
    display: block;
    border-bottom: 1px solid #f3f4f6;
    width: 100%;
}

.mobile-menu-list li a {
    display: block;
    padding: 1rem 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s;
    width: 100%;
}

.mobile-menu-list li a:hover {
    color: var(--color-primary);
    padding-left: 0.5rem;
    /* Slight nudge effect */
}

/* Body Lock */
body.menu-open {
    overflow: hidden;
}

/* Clean up old styles inside media query */
@media (max-width: 1023px) {

    /* Hide the desktop nav completely on mobile, no interaction necessary */
    .header-inner .main-nav {
        display: none !important;
    }

    .header-inner {
        padding: 0;
        justify-content: space-between;
    }
}

/* Lock body scroll when menu open */
body.menu-open {
    overflow: hidden;
}

/* Mobile toggle button */
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 10000;
    position: relative;
}

.nav-arrow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fdf2f2;
}

.nav-arrow .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Mobile Adjustments for Modern Header */
@media (max-width: 768px) {
    .sect-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .sect-tabs-group {
        width: 100%;
        overflow-x: auto;
        /* Allow scrolling pills */
    }

    .sect-tabs-line {
        display: none;
        /* Hide lines on mobile */
    }

    .sect-tabs-pills {
        width: 100%;
        overflow-x: auto;
        border: none;
        padding: 0;
    }

    .tab-pill {
        border: 1px solid #f3f4f6;
    }

    .sect-nav-arrows {
        display: none;
        /* Hide arrows on mobile for simplicity */
    }
}

/* Mobile menu styles continuation */

.main-nav.active {
    transform: translateX(0);
    visibility: visible;
}


.main-nav a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 1.125rem;
}

/* Toggle Button */
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    /* Ensure White BG */
    border: 1px solid #eee;
    /* Light Border */
    border-radius: 12px !important;
    /* ROUNDED SQUARE (Fixes Round Issue) */
    cursor: pointer;
    z-index: 999;
    margin-left: 0.5rem;
    color: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Soft Shadow */
}

.mobile-toggle .material-symbols-outlined {
    font-size: 2rem;
}

/* CTA Button on Mobile - REMOVE */
.header-actions .btn-primary {
    display: none !important;
}

/* Search */
.header-search {
    display: none !important;
    /* Force hide desktop search */
}

.mobile-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: #1f2937;
}

.mobile-search-bar {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 900;
    border-top: 1px solid #f3f4f6;
}

.mobile-search-bar.active {
    display: block;
}

.mobile-search-bar form {
    display: flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.5rem;
}

.mobile-search-bar input {
    border: none;
    background: transparent;
    flex: 1;
    outline: none;
    padding: 0 10px;
}

.mobile-search-bar button {
    background: none;
    border: none;
    color: var(--color-primary);
}

/* --- GRIDS & LAYOUT --- */

/* Grid 4 -> 2 on Tablet */
@media (max-width: 768px) and (min-width: 640px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* USP Grid */
    .usp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Fix USP Overlap & Header Visibility */
.usp-section {
    position: relative;
    z-index: 50;
    margin-top: -5rem;
    /* Overlap Hero */
    pointer-events: none;
    /* Allow clicking through empty areas if any */
}

.usp-card {
    pointer-events: auto;
    /* Re-enable clicks on card */
    background-color: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.header-actions {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 1.5rem;
}

/* MOBILE ONLY (max-width: 639px) */
@media (max-width: 639px) {

    /* Grids -> 1 col */
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .usp-section {
        margin-top: -2rem;
        /* Reduce overlap on mobile */
    }

    .usp-card {
        padding: 1.5rem 1rem;
        /* Compact padding */
        border-radius: 1.5rem;
        /* Smaller radius */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        /* Lighter shadow */
        background: #fff;
        /* Ensure bg */
    }

    .usp-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        width: 100%;
    }

    .usp-item {
        flex-direction: column;
        /* Stack vertically for 2-col */
        text-align: left;
        /* Left align text */
        align-items: flex-start;
        /* Left align items */
        padding: 0.5rem;
        gap: 0.5rem;
        width: 100%;
    }

    .usp-card .usp-title {
        /* Mobile title adjust */
    }

    .usp-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .usp-icon .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .usp-title {
        font-size: 0.75rem;
        /* Smaller text */
        margin-bottom: 0;
        line-height: 1.2;
        font-weight: 700;
        height: 2rem;
        /* Limit height */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* Left align flex content */
        text-align: left;
    }

    .usp-desc {
        display: none;
        /* Hide description on mobile to save space */
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Hero */
    .hero-section {
        position: relative;
        width: 100%;
        display: block;
        /* Let content dictate height via image */
        padding: 0;
        min-height: 0;
        /* No forced height */
        aspect-ratio: auto;
        /* Reset */
    }

    .hero-wrapper {
        position: relative;
        width: 100%;
        line-height: 0;
        /* Remove gap */
    }

    .hero-img-natural {
        width: 100%;
        height: auto;
        /* Natural height based on width */
        display: block;
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hero-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Dead center */
        z-index: 2;
        width: 100%;
        padding: 0 5%;
        text-align: center;
        /* Content height is irrelevant to container height now */
    }

    /* Ratio-based Typography */
    .hero-title {
        font-size: 5vw;
        /* Relative to width */
        line-height: 1.2;
        margin-bottom: 2vw;
    }

    .hero-sub {
        font-size: 3vw;
        margin-bottom: 3vw;
    }

    .hero-badge {
        font-size: 2.5vw;
        padding: 0.5em 1em;
        margin-bottom: 2vw;
        display: inline-block;
    }

    .hero-content .btn-primary {
        font-size: 2.5vw !important;
        padding: 0.8em 2em !important;
        min-height: auto;
        /* Allow shrinking */
        border-radius: 999px;
    }

    .hero-content .btn-primary .material-symbols-outlined {
        font-size: 1.2em;
        /* Relative to button font */
    }

    /* Brand */
    .brand-text {
        display: none;
        /* Icon only on small mobile to save space */
    }

    .partner-item {
        width: 120px;
        height: 60px;
    }

    /* Section Headers */
    .sect-header {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .sect-header .btn-primary {
        position: absolute;
        top: 0;
        right: 0;
        transform: scale(0.9);
    }

    .sect-title {
        font-size: 1.5rem;
        max-width: 80%;
        /* Space for button */
    }

    /* USP / Process Grid Stacking */
    /* Assuming .usp-grid is used for Process section too based on screenshot analysis of 2-col */
    /* Force stack for process steps specifically if they are special */
    /* Checking screenshot, "Quy Trình" steps look like they might need specific vertical stacking if they contain wide elements */

    /* Blog Grid Fix */
    /* In snippet above, .grid-4 was forced to 3 cols inline logic?
       Need to ensure important override for mobile */

    .grid-4,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* DESKTOP DEFAULTS (Ensure elements are hidden/shown correctly) */
@media (min-width: 1024px) {

    .mobile-toggle,
    .mobile-search-toggle,
    .mobile-search-bar {
        display: none;
    }

    .btn-primary .btn-text {
        display: inline;
    }
}

.search-result-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background 0.2s;
}

.search-result-item a:hover {
    background: #f9fafb;
}

.search-thumb img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.search-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.25;
}

.search-price {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 700;
}

.search-loading,
.no-results {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.search-footer {
    padding: 0.75rem;
    text-align: center;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 0.5rem 0.5rem;
}

.search-footer a {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

/* --- SHARED SLIDER STYLES (Product Cats & New Products) --- */

/* Header Wrapper */
.op-header-wrapper {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Row 1: Top (Title + Arrows) */
.op-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Row 2: Tabs */
.op-tabs {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
}

.op-tabs::-webkit-scrollbar {
    display: none;
}

.op-tabs-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media(max-width: 1024px) {
    .op-tabs-list {
        flex-wrap: nowrap;
    }
}

.op-tab-pill {
    padding: 0.5rem 1.25rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.op-tab-pill:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: #fef2f2;
}

.op-tab-pill.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Nav Arrows */
.op-nav {
    display: flex;
    gap: 0.5rem;
}

.op-arrow {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
}

.op-arrow:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* Mobile hide nav if needed, but keeping visible in top row logic if desired. 
   Previous logic hid it on mobile. Let's maintain that consistent behavior. */
@media (max-width: 768px) {
    .op-nav {
        display: none;
    }
}

/* Slider Track */
.op-slider-container {
    overflow: hidden;
    padding: 0.5rem;
    margin: 0 -0.5rem;
}

.op-slider-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    scrollbar-width: none;
}

.op-slider-track::-webkit-scrollbar {
    display: none;
}

/* Slider Items */
.op-slide-item {
    flex: 0 0 calc(20% - 1.2rem);
    min-width: 220px;
}

@media (max-width: 1024px) {
    .op-slide-item {
        flex: 0 0 calc(33.333% - 1rem);
    }
}

@media (max-width: 768px) {
    .op-slide-item {
        flex: 0 0 85%;
    }
}

/* Specific Column Overrides */
/* 5 Columns (Default 20%) */
.op-slide-item.col-5 {
    flex: 0 0 calc(20% - 1.2rem);
}

/* 4 Columns (25%) */
.op-slide-item.col-4 {
    flex: 0 0 calc(25% - 1.2rem);
    min-width: 250px;
    /* Slightly wider min-width for 4 cols */
}

@media (min-width: 1025px) {

    /* Ensure col-4 takes effect on desktop */
    .op-slide-item.col-4 {
        flex: 0 0 calc(25% - 1.125rem);
        /* 1.5rem gap * 3 / 4 */
    }
}

/* --- PRODUCT CARD STYLES (Restored for Homepage Sliders Only) --- */

.op-slide-item .acprod-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    text-decoration: none !important;
    color: inherit !important;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.op-slide-item .acprod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: transparent;
    text-decoration: none !important;
}

.op-slide-item .acprod-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f9fafb;
}

.op-slide-item .acprod-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.products-hot-section .op-slide-item .acprod-card__img-wrap,
.products-hot-section .op-slide-item .acprod-card__img {
    aspect-ratio: 16/9;
}

.products-hot-section .op-slide-item .acprod-card__img {
    height: 100%;
    object-fit: cover;
    display: block;
}

.op-slide-item .acprod-card:hover .acprod-card__img {
    transform: scale(1.05);
}

.op-slide-item .acprod-card__badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    z-index: 10;
}

.op-slide-item .acprod-card__body {
    padding: 0.25rem 0.75rem 0.5rem 0.75rem;
    /* Minimized top padding to pull title up to image */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Force title color and remove underline */
.op-slide-item .acprod-card__title,
.op-slide-item .acprod-card__title a {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827 !important;
    text-decoration: none !important;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    height: 2.7rem;
}

.op-slide-item .acprod-card:hover .acprod-card__title,
.op-slide-item .acprod-card:hover .acprod-card__title a {
    color: var(--color-primary) !important;
}

.op-slide-item .acprod-card__bottom {
    margin-top: 0;
}

.op-slide-item .acprod-card__prices {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.op-slide-item .acprod-card__prices .price {
    color: #ef4444 !important;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none !important;
}

.op-slide-item .acprod-card__prices .sale {
    color: #9ca3af;
    text-decoration: line-through !important;
    font-size: 0.8rem;
}

.op-slide-item .acprod-card__rating {
    display: flex;
    margin-top: 0.5rem;
}


/* --- NEW PROCESS SECTION (Dark Cards) --- */

.process-dark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .process-dark-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.process-dark-card {
    background-color: #131827;
    border-radius: 1.5rem;
    padding: 2.5rem 2rem 0.5rem 2rem;
    /* Minimized bottom padding */
    position: relative;
    overflow: hidden;
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Height auto by default now */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    z-index: 10;
    /* Ensure visual priority */
}

.process-dark-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
}

.process-watermark {
    position: absolute;
    top: 0rem;
    right: 1.5rem;
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    font-family: var(--font-primary);
}

.process-icon-wrap {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.process-icon-wrap.bg-red {
    background-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(242, 13, 13, 0.4);
}

.process-icon-wrap.bg-yellow {
    background-color: var(--color-accent-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.process-icon-wrap .material-symbols-outlined {
    font-size: 2rem;
    color: #fff;
}

.process-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.process-card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #9ca3af;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    /* Remove excess spacing */
}

/* FORCE DESKTOP HEADER VISIBILITY */
@media (min-width: 768px) {
    .header-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .header-actions .header-search {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .header-actions .btn-primary {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: var(--color-primary) !important;
        color: #fff !important;
    }
}

/* FIX: Price Colors for Homepage Sliders (Shortcode Renderer) */
.op-slide-item .acprod-card__price-row .price-current {
    color: #eff6ff !important;
    /* Wait, user wants RED. */
    /* Previous rule was #ef4444 */
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 1.1rem;
}

.op-slide-item .acprod-card__price-row .price-old {
    color: #9ca3af !important;
    text-decoration: line-through !important;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* Ensure no override from other styles */
/* Partners Section Spacing */
.partners-section {
    padding-top: 3rem;
    margin-top: 0;
    position: relative;
    z-index: 2;
    background-color: #fff;
    /* Ensure it has background */
    overflow: hidden;
    /* Clip artifacts */
}

.partners-slider {
    overflow: hidden;
}

.partners-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    padding: 1rem 0;
    /* Space for shadows if any */
}

.partners-track::-webkit-scrollbar {
    display: none;
}

.partner-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    /* Fixed width for better control */
}

.partner-item img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s;
}

/* Product Category Menu */
.header-cat-menu {
    position: relative;
    margin-right: 2rem;
    /* Spacing from Menu */
}

.cat-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #f3f4f6;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.cat-menu-trigger:hover {
    background-color: #fff;
    border-color: #e5e7eb;
    color: var(--color-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.cat-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 260px;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    padding: 0.75rem 0;
    margin-top: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
    border: 1px solid #f3f4f6;
}

/* Triangle tip (optional) */
.cat-menu-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 2rem;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-top: 1px solid #f3f4f6;
    border-left: 1px solid #f3f4f6;
}

.header-cat-menu:hover .cat-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cat-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cat-menu-list li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: #4b5563;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
    border-bottom: 1px solid #f9fafb;
}

.cat-menu-list li:last-child a {
    border-bottom: none;
}

.cat-menu-list li a:hover {
    color: var(--color-primary);
    background-color: #fef2f2;
    padding-left: 1.75rem;
}

.cat-menu-list li a .material-symbols-outlined {
    font-size: 1.25rem;
    color: #d1d5db;
    transition: color 0.2s;
}

.cat-menu-list li a:hover .material-symbols-outlined {
    color: var(--color-primary);
}

@media (max-width: 1200px) {
    .header-cat-menu {
        display: none;
        /* Hide on smaller desktops if crowded, or adjust */
    }
}

/* Footer Defaults */
.site-footer {
    background-color: #121827;
    color: #fff;
}

/* ============================================================
   MOBILE 2-COLUMN LAYOUT (≤ 600px) - THEME HOMEPAGE
   Giống Shopee / Tiki / TikTok Shop
   KHÔNG ảnh hưởng PC hay Tablet (>600px)
   ============================================================ */
@media (max-width: 600px) {

    /* ── 1. HOMEPAGE PRODUCT SLIDERS: đổi thành 2 cột grid ── */
    .op-slider-track {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        overflow-x: unset !important;
        scroll-snap-type: unset !important;
        padding-bottom: 0 !important;
    }

    /* Fix cho TẤT CẢ variants của op-slide-item (kể cả .col-4, .col-5) */
    .op-slide-item,
    .op-slide-item.col-4,
    .op-slide-item.col-5 {
        flex: unset !important;
        width: auto !important;
        min-width: 0 !important;
        /* override min-width: 250px của .col-4 */
        max-width: 100% !important;
        scroll-snap-align: unset !important;
    }

    /* Giới hạn tối đa 10 sản phẩm mỗi section trên mobile */
    .op-slide-item:nth-child(n+11) {
        display: none !important;
    }

    /* Ẩn nút điều hướng slider trên mobile */
    .op-nav {
        display: none !important;
    }

    /* Ẩn "Xem tất cả" nút trong header section (optional: giữ lại nếu muốn) */
    /* .op-header-top a.btn-primary { display: none !important; } */

    /* ── 2. CARD trong slider homepage: thu nhỏ cho vừa 2 cột ── */
    .op-slide-item .acprod-card__body {
        padding: 6px 8px 8px !important;
        gap: 0.1rem !important;
    }

    .op-slide-item .acprod-card__title {
        font-size: 11px !important;
        /* Không set height cứng — để tự động 2 dòng */
        height: unset !important;
        min-height: unset !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.4 !important;
        margin: 0 0 4px !important;
    }

    .op-slide-item .acprod-card__brand {
        font-size: 9px !important;
    }

    .op-slide-item .acprod-card__price-row,
    .op-slide-item .acprod-card__prices {
        margin-bottom: 4px !important;
    }

    .op-slide-item .price-current,
    .op-slide-item .acprod-card__prices .price {
        font-size: 12px !important;
    }

    .op-slide-item .price-old,
    .op-slide-item .acprod-card__prices .sale {
        font-size: 10px !important;
    }

    .op-slide-item .acprod-card__rating {
        margin-bottom: 0 !important;
    }

    .op-slide-item .acprod-card__rating .material-symbols-outlined {
        font-size: 10px !important;
    }

    /* ── 3. TIÊU ĐỀ & SECTION HEADER: font nhỏ hơn ── */
    .sect-title {
        font-size: 1rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .sect-bar {
        height: 1.25rem !important;
        width: 0.25rem !important;
    }

    .sect-header {
        margin-bottom: 0.75rem !important;
        gap: 0.4rem !important;
    }

    .op-header-top {
        gap: 0.4rem !important;
        flex-wrap: wrap !important;
    }

    .op-header-wrapper {
        margin-bottom: 0.75rem !important;
    }

    /* ── 4. CATEGORY TABS: cuộn ngang giữ nguyên, phong cách nhỏ hơn ── */
    .op-tabs-list {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
    }

    .op-tab-pill {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* ── 5. SECTION spacing giảm ── */
    .section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* ── 6. Override .grid-4 peekshow effect cũ ── */
    .grid-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        overflow-x: unset !important;
        scroll-snap-type: unset !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 10px !important;
    }

    .grid-4>* {
        flex: unset !important;
        width: auto !important;
        max-width: unset !important;
        min-width: 0 !important;
        scroll-snap-align: unset !important;
    }

    /* ── 7. Header thu nhỏ trên mobile ── */
    .logo-img {
        height: 40px !important;
    }

    .btn-compact {
        padding: 0.2rem 0.6rem !important;
        font-size: 0.75rem !important;
        min-height: 30px !important;
        height: 30px !important;
    }

    .btn-compact .btn-text {
        display: none !important;
        /* Chỉ show icon trên mobile nhỏ */
    }
}