/* Grifow Products Styles */
:root {
    --acp-primary: #f20d0d;
    --acp-primary-hover: #d30b0b;
    --acp-text: #1c0d0d;
    --acp-text-gray: #4b5563;
    --acp-border: #f3f4f6;
    --acp-bg-light: #f9fafb;
    --acp-gold: #D4AF37;
    --acp-zalo: #0068FF;
    --acp-zalo-hover: #0056d6;
    --acp-blue: #3b82f6;
    --acp-black: #111827;
}

body {
    background-color: #f8f5f5;
}

.acprod-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 16px 80px;
    font-family: inherit;
    /* Inherit from root via style tag */
    color: var(--acp-text);
}


/* Breadcrumbs */
.acprod-breadcrumbs {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #6b7280;
    /* Gray-500 */
    margin-bottom: 24px;
    gap: 8px;
    flex-wrap: wrap;
}

.acprod-breadcrumbs a {
    text-decoration: none;
    color: #6b7280 !important;
    /* Force Gray */
    transition: color 0.2s;
    font-weight: 400;
}

.acprod-breadcrumbs a:hover {
    color: var(--acp-primary) !important;
}

.acprod-breadcrumbs .material-symbols-outlined {
    font-size: 16px;
    color: #9ca3af;
}

.acprod-breadcrumbs .current {
    font-weight: 700;
    /* Bold */
    color: #111827 !important;
    /* Force Black */
}

/* Hero Grid */
.acprod-hero {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    padding: 24px;
    margin-bottom: 32px;
}

.acprod-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1024px) {
    .acprod-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

/* Gallery */
.acprod-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acprod-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background: #f9fafb;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f3f4f6;
}

.acprod-gallery__img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.5s;
}

.acprod-gallery__main:hover .acprod-gallery__img {
    transform: scale(1.05);
}

/* Badges Horizontal */
.acprod-badges-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping securely */
    gap: 8px;
    align-items: center;
}

.acprod-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.acprod-badge--primary {
    background: var(--acp-primary);
    color: #fff;
}

.acprod-badge--gold {
    background: var(--acp-gold);
    color: #fff;
}

.acprod-badge--blue {
    background: var(--acp-blue);
    color: #fff;
}

.acprod-badge--black {
    background: var(--acp-black);
    color: #fff;
}

.acprod-badge .material-symbols-outlined {
    font-size: 16px;
}

/* Image Counter */
.acprod-img-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

/* Gallery Slider */
.acprod-thumbs-slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.acprod-thumbs-slider {
    flex: 1;
    overflow: hidden;
}

.acprod-thumbs-track {
    display: flex;
    gap: 12px;
    transition: transform 0.3s ease-out;
    cursor: grab;
    touch-action: pan-y;
}

.acprod-thumbs-track.grabbing {
    cursor: grabbing;
    transition: none;
}

.acprod-thumb {
    width: calc(25% - 9px);
    /* 4 items minus gap */
    flex-shrink: 0;
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    padding: 4px;
    transition: all 0.2s;
}

.acprod-thumb.active {
    border-color: var(--acp-primary);
    box-shadow: 0 0 0 1px var(--acp-primary);
}

.acprod-thumb__img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
}

.acprod-slider-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
    z-index: 2;
}

.acprod-slider-btn:hover {
    border-color: var(--acp-primary);
    color: var(--acp-primary);
}

.acprod-slider-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


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

.acprod-title {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 12px;
}

@media (min-width: 768px) {
    .acprod-title {
        font-size: 32px;
    }
}

.acprod-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.acprod-rating {
    display: flex;
    color: var(--acp-gold);
}

.acprod-rating .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

.acprod-divider {
    width: 1px;
    height: 16px;
    background: #d1d5db;
}

.acprod-status {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.acprod-status .material-symbols-outlined {
    font-size: 18px;
}

.acprod-status.text-green-600 {
    color: #16a34a;
}

.acprod-status.text-orange-500 {
    color: #f97316;
}

.acprod-status.text-red-600 {
    color: #dc2626;
}

.acprod-price-box {
    background: #f9fafb;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.acprod-price-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.acprod-price {
    font-size: 30px;
    font-weight: 900;
    color: var(--acp-primary);
    line-height: 1;
}

.acprod-sale {
    font-size: 18px;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
}

.acprod-vat {
    font-size: 13px;
    color: #4b5563;
    margin: 0;
}

.acprod-short-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 24px;
    padding: 12px;
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}

.acprod-commits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.acprod-commit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acprod-commit .material-symbols-outlined {
    color: var(--acp-primary);
    font-size: 20px;
    margin-top: 2px;
}

.acprod-commit p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.acprod-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}

@media (min-width: 640px) {
    .acprod-actions {
        flex-direction: row;
    }
}

.acprod-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.acprod-btn:active {
    transform: scale(0.98);
}

.acprod-btn:hover {
    filter: brightness(1.1);
}

.acprod-btn__main {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.acprod-btn__sub {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.9;
}

/* Layout Grid (Single Product) */
.acprod-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/* Archive Page Redesign */
.acprod-archive-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1024px) {
    .acprod-archive-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }
}

/* Sidebar Styles */
/* Sidebar Styles (Card Design) */
.acprod-sidebar-filter {
    background: transparent;
    /* No container styling */
    border: none;
    padding: 0;
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .acprod-sidebar-filter {
        width: 270px;
        position: sticky;
        top: 20px;
    }
}

.acprod-filter-widget {
    margin-bottom: 24px;
    background: #fff;
    border-radius: 24px;
    /* More rounded */
    padding: 24px 32px;
    /* Wider padding */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border: none;
}

.acprod-filter-widget:last-child {
    margin-bottom: 0;
}

.acprod-filter-widget h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
}

.acprod-filter-widget h3 .material-symbols-outlined {
    font-size: 24px;
    color: var(--acp-primary);
}

/* Sidebar List (Block Style) */
.acprod-filter-list {
    list-style: none !important;
    /* Force remove bullets */
    padding: 0;
    margin: 0;
}

.acprod-filter-list li {
    margin-bottom: 2px;
    list-style: none !important;
    /* Safety */
}

.acprod-filter-list li {
    margin-bottom: 0px;
    /* Reduced to 0 as padding exists */
    list-style: none !important;
}

.acprod-filter-list a {
    display: flex;
    justify-content: flex-start;
    /* Align Left */
    gap: 4px;
    /* Space between Name and Count */
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    color: #4b5563;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
}

.acprod-filter-list a:hover {
    background: #f3f4f6;
    /* Grey hover */
    color: #111827;
}

.acprod-filter-list a.active {
    background: #fef2f2;
    /* Light Red active */
    color: #dc2626;
}

/* Chevron Icon via CSS */
.acprod-filter-list a::after {
    content: "\e5cc";
    /* material-icon: chevron_right */
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: auto;
    /* Push to right */
}

.acprod-filter-list a:hover::after,
.acprod-filter-list a.active::after {
    opacity: 1;
}

/* Hide count in Category List */
/* Count in Category List */
/* Global Count Logic: Hide items count for cleaner look */
.acprod-filter-list .count,
.acprod-brand-list .count,
.acprod-checkbox .count {
    display: none !important;
}

/* Price Inputs */
/* Price Filter Wrapper */
.acprod-price-inputs {
    display: block;
    /* Stack slider and inputs */
    margin-bottom: 12px;
}

/* Range Slider */
.acprod-slider-container {
    position: relative;
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
}

.acprod-slider-container input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}

/* Track */
.slider-track {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 4px;
}

/* Thumbs */
.acprod-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    cursor: pointer;
    background: #ef4444;
    border-radius: 50%;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    margin-top: -6px;
    /* Center */
}

.acprod-slider-container input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    cursor: pointer;
    background: #ef4444;
    border-radius: 50%;
    pointer-events: auto;
    border: none;
}

/* Inputs Row */
.acprod-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acprod-price-row input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.acprod-price-row input:focus {
    border-color: var(--acp-primary);
}

.acprod-filter-btn {
    width: 100%;
    background: #ef4444;
    /* Red */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

.acprod-filter-btn:hover {
    background: #dc2626;
}

/* Brand Checkboxes */
.acprod-brand-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.acprod-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Left align */
    gap: 12px;
    font-size: 15px;
    color: #4b5563;
    font-weight: 400;
    cursor: pointer;
    padding: 6px 0;
    /* Minimal padding */
    transition: color 0.2s;
}

/* Checkbox Style */
.acprod-checkbox input {
    display: none;
}

/* Hide default input */

.acprod-checkbox .chk-mark {
    width: 20px;
    height: 20px;
    border: 1px solid #d1d5db;
    /* Grey border */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.2s;
    flex-shrink: 0;
}

.acprod-checkbox .chk-mark .material-symbols-outlined {
    color: white;
    font-size: 16px;
    transform: scale(0);
    transition: transform 0.2s;
}

/* Hover */
.acprod-checkbox:hover {
    color: #111827;
}

.acprod-checkbox:hover .chk-mark {
    border-color: #ef4444;
    /* Light red border on hover */
}

/* Checked State */
.acprod-checkbox input:checked+.chk-mark {
    background: #ef4444;
    /* Red bg */
    border-color: #ef4444;
}

.acprod-checkbox input:checked+.chk-mark .material-symbols-outlined {
    transform: scale(1);
}

.acprod-checkbox:has(input:checked) {
    color: #111827;
    font-weight: 500;
}

/* Add Chevron to Brand list too? Or just highlight? Image implies clean list. 
   Let's add checkmark or chevron to match Category style if active. 
   Or just color change. Step 515 image has NO icons. */

/* Hide count in Brand List too if requested? 
   "Loại bỏ những ký hiệu này đi" -> refers to checkboxes/bullets.
   Counts are numbers (2), (1). User didn't circle them in Step 515, but let's keep them plain text.
   Wait, in Step 515 image, counts (2) are visible. So keep counts. 
*/


/* Content Area */
.acprod-archive-content {
    flex: 1;
}

.acprod-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    border-bottom: none;
    padding-bottom: 0;
}

.acprod-archive-title {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #a13838;
    /* Updated to match Sort Label */
    margin: 0;
}

.acprod-toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.acprod-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
}

.acprod-search .material-symbols-outlined {
    font-size: 20px;
    color: #a13838;
}

.acprod-search input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #111827;
    background: transparent;
    width: 200px;
}

.acprod-sort {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #a13838;
    /* Dark Red/Brown */
}

.acprod-sort label {
    color: #a13838;
    font-weight: 700;
    /* Bold label */
}

.acprod-sort select {
    padding: 8px 32px 8px 16px;
    border: 1px solid #fecaca;
    /* Light red border */
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    min-width: 150px;
}

.acprod-sort select:focus {
    border-color: var(--acp-primary);
    box-shadow: 0 0 0 1px var(--acp-primary);
}

/* Grid System */
.acprod-grid-u {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

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

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

/* 3 Columns as requested/image */

/* Product Card Redesign */
.acprod-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 24px;
    /* Updated to 24px */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, transform 0.3s;
    /* Fix clipping issue */
    transform: translateZ(0);
    isolation: isolate;
}

.acprod-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    transform: translateY(-2px);
    border-color: #e5e7eb;
}

.acprod-card__img-wrap {
    position: relative;
    padding-top: 100%;
    background: #f9fafb;
    overflow: hidden;
    display: block;
    /* Removed manual border-radius to rely on parent clip */
    margin: -1px -1px 0 -1px;
    /* Pull to cover parent border */
    width: calc(100% + 2px);
}

.acprod-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s;
    /* margin: 0; */
}

.acprod-card:hover .acprod-card__img {
    transform: scale(1.08);
}

.acprod-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    border-radius: 2px;
    z-index: 5;
}

.acprod-badge.is-sale {
    background: var(--acp-primary);
    left: auto;
    right: 10px;
}

.acprod-badge.is-out {
    background: #6b7280;
}

.acprod-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Elements */
.acprod-card__brand {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--acp-primary);
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.acprod-card__title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
    line-height: 1.4;
    height: 42px;
    /* 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.acprod-card__title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.acprod-card:hover .acprod-card__title a {
    color: var(--acp-primary);
}

.acprod-card__rating {
    display: flex;
    margin-bottom: 8px;
}

.acprod-card__rating .material-symbols-outlined {
    font-size: 14px;
    color: #fbbf24;
    font-variation-settings: 'FILL' 1;
}

.acprod-card__price-row {
    margin-top: auto;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-current {
    font-size: 16px;
    font-weight: 700;
    color: var(--acp-primary);
}

.price-old {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
}

.acprod-btn-full {
    display: block;
    width: 100%;
    background: var(--acp-primary);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
}

.acprod-btn-full:hover {
    background: #d30b0b;
}

/* Pagination */
.acprod-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.acprod-pagination .page-numbers {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
}

.acprod-pagination .page-numbers li {
    margin: 0;
}

.acprod-pagination .page-numbers a,
.acprod-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    text-decoration: none;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.acprod-pagination .page-numbers a:hover,
.acprod-pagination .page-numbers span.current {
    background: var(--acp-primary);
    color: white;
    border-color: var(--acp-primary);
}


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

    .acprod-main.has-sidebar {
        grid-column: span 8;
    }

    .acprod-main.full-width {
        grid-column: span 12;
    }

    .acprod-sidebar {
        grid-column: span 4;
    }
}

/* Tabs & Box */
.acprod-box {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.acprod-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
}

.acprod-tab {
    flex: 1;
    padding: 16px;
    background: none;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.acprod-tab .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0;
}

.acprod-tab:hover {
    color: #111827;
}

.acprod-tab.active {
    color: var(--acp-primary);
    border-bottom-color: var(--acp-primary);
    background: #fef2f2;
}

.acprod-tab.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.acprod-content {
    padding: 24px;
}

@media (min-width: 768px) {
    .acprod-content {
        padding: 32px;
    }
}

.acprod-pane {
    display: none;
}

.acprod-pane.active {
    display: block;
}

.acprod-prose {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

.acprod-prose p {
    margin-bottom: 1em;
}

.acprod-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Custom List Checkmarks */
.acprod-prose ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1em;
}

.acprod-prose ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
}

.acprod-prose ul li::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--acp-primary);
    font-weight: bold;
    font-size: 18px;
}

/* Specs Table */
.acprod-table-wrap {
    overflow-x: auto;
}

.acprod-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.acprod-specs-table tr:nth-child(even) {
    background: #f9fafb;
}

.acprod-specs-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.acprod-specs-table td.label {
    width: 35%;
    font-weight: 600;
    color: #111827;
}

/* Video */
.acprod-video-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.acprod-video-wrap iframe,
.acprod-video-wrap video {
    width: 100%;
    height: 100%;
    border: none;
}

/* Sidebar Widgets */
.acprod-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.acprod-widget {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.acprod-widget--consult {
    border: 1px solid rgba(212, 175, 55, 0.3);
    position: relative;
    overflow: hidden;
}

/* Decorative blob */
.acprod-widget__deco {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.acprod-widget--consult h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--acp-text);
    position: relative;
    z-index: 2;
}

.acprod-widget--consult p {
    font-size: 14px;
    color: #4b5563;
    margin: 0 0 16px;
    position: relative;
    z-index: 2;
}

.acprod-widget-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.acprod-btn-small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.acprod-btn-small--call {
    background: var(--acp-primary);
    color: white;
}

.acprod-btn-small--call:hover {
    background: var(--acp-primary-hover);
}

.acprod-btn-small--zalo {
    background: #fff;
    border: 1px solid var(--acp-zalo);
    color: var(--acp-zalo);
}

.acprod-btn-small--zalo:hover {
    background: #eff6ff;
}

.acprod-widget-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--acp-text);
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.acprod-widget-title .material-symbols-outlined {
    color: var(--acp-primary);
}

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

.acprod-cat-list li {
    margin-bottom: 4px;
}

.acprod-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    transition: all 0.2s;
}

.acprod-cat-list a:hover {
    background: #f9fafb;
    color: var(--acp-primary);
}

.acprod-cat-list li.active a {
    background: #fef2f2;
    color: var(--acp-primary);
    font-weight: 600;
}

.acprod-cat-list span.material-symbols-outlined {
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.2s;
}

.acprod-cat-list a:hover span.material-symbols-outlined {
    opacity: 1;
}

.acprod-new-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acprod-new-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
}

.acprod-new-item__img {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #f3f4f6;
    flex-shrink: 0;
}

.acprod-new-item__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.acprod-new-item h4 {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 4px;
    line-height: 1.4;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.acprod-new-item:hover h4 {
    color: var(--acp-primary);
}

.acprod-new-item .price {
    font-size: 14px;
    font-weight: 700;
    color: var(--acp-primary);
}

.acprod-promo {
    display: block;
    position: relative;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}

.acprod-promo__bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s;
}

.acprod-promo:hover .acprod-promo__bg {
    transform: scale(1.05);
}

.acprod-promo__content {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), transparent);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.acprod-promo .badge {
    color: var(--acp-gold);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.acprod-promo h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
}

.acprod-promo p {
    font-size: 14px;
    color: #d1d5db;
    margin: 0 0 16px;
}

.acprod-promo .btn {
    display: inline-block;
    background: white;
    color: black;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 4px;
    align-self: flex-start;
}

.acprod-promo:hover .btn {
    background: var(--acp-primary);
    color: white;
}

/* Related Grid */
.acprod-related {
    margin-top: 48px;
}

.acprod-related__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.acprod-heading {
    font-size: 24px;
    font-weight: 700;
    border-left: 5px solid var(--acp-primary);
    padding-left: 12px;
    margin: 0;
    line-height: 1.2;
}

.acprod-view-all {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.acprod-view-all:hover {
    color: var(--acp-primary);
}

.acprod-related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

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

.acprod-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Default Light Shadow */
}

.acprod-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.acprod-card__img-wrap {
    position: relative;
    padding-top: 100%;
    background: #f9fafb;
    overflow: hidden;
}

.acprod-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s;
    /* margin: 0; Removed margin */
}

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

.acprod-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #111827;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.acprod-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.acprod-card__title {
    font-size: 15px;
    font-weight: 800;
    /* Bolder */
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.acprod-card:hover .acprod-card__title {
    color: var(--acp-primary);
}

.acprod-card__bottom {
    margin-top: auto;
}

.acprod-card__prices {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.acprod-card__prices .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--acp-primary);
}

.acprod-card__prices .sale {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
}

.acprod-card__rating {
    display: flex;
    gap: 1px;
    color: var(--acp-gold);
}

.acprod-card__rating .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

/* Badge Container */
/* Badge Container */
.acprod-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: row;
    /* Horizontal */
    flex-wrap: wrap;
    /* Wrap if many */
    gap: 4px;
    z-index: 5;
    align-items: flex-start;
}

/* Base Badge Style - Updated */
.acprod-badge {
    position: static !important;
    /* Let container control position, override old style */
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.acprod-badge.is-out {
    background-color: #374151;
    /* Dark Gray for Out Stock */
}

.acprod-badge.is-sale {
    background-color: var(--acp-primary);
    /* Red */
}


.acprod-badge .material-symbols-outlined {
    font-size: 14px;
    margin-right: 4px;
}

/* Tone Classes matching helpers.php and single template */
.acprod-badge--primary {
    background-color: var(--acp-primary);
}

.acprod-badge--gold {
    background-color: #f59e0b;
    color: #fff;
}

.acprod-badge--dark {
    background-color: #111827;
}

.acprod-badge--blue {
    background-color: #3b82f6;
}

/* Example for 'Mới' if needed, or mapped to primary */

/* Specific 'Sale' styling override if needed, but is-sale handles it */

/* Sale Ribbon - Diagonal Top Right */
/* Sale Ribbon - Diagonal Top Right */
.acprod-sale-ribbon {
    position: absolute;
    top: 15px;
    /* Pushed down further */
    right: -35px;
    /* Pushed right further */
    padding: 5px 0;
    /* Thicker */
    background: #ef4444;
    /* Red */
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    /* Larger font */
    font-weight: 800;
    line-height: 1.2;
    transform: rotate(45deg);
    /* Diagonal Top-Right */
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 120px;
    /* Wider strip */
    text-align: center;
    letter-spacing: 0.5px;
}

/* Ensure container clips the ribbon */
.acprod-card__img-wrap {
    overflow: hidden;
    position: relative;
}

/* Badge Container */
.acprod-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: row;
    /* Horizontal */
    flex-wrap: wrap;
    /* Wrap if many */
    gap: 4px;
    z-index: 5;
    align-items: flex-start;
}

/* Clear Reset Button */
.acprod-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #d1d5db;
    /* Gray-300 */
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    /* Gray-600 */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    /* Force no underline */
}

.acprod-btn-outline:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.acprod-btn-outline .material-symbols-outlined {
    font-size: 18px;
}

/* DYNAMIC GRID & SWIPER SHORTCODE */

/* Dynamic Grid */
.acprod-grid-dyn {
    display: grid;
    grid-template-columns: repeat(var(--acp-g-mb, 1), 1fr);
    gap: var(--acp-gap, 20px);
}

@media (min-width: 640px) {
    .acprod-grid-dyn {
        grid-template-columns: repeat(var(--acp-g-tab, 2), 1fr);
    }
}

@media (min-width: 1024px) {
    .acprod-grid-dyn {
        grid-template-columns: repeat(var(--acp-g-pc, 4), 1fr);
    }
}

/* Swiper Styling */
.acprod-swiper-container {
    position: relative;
    padding: 0 4px;
    /* Slight padding to avoid shadow clip */
}

/* Nav Buttons */
.acprod-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    z-index: 10;
    color: #374151;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}

.acprod-swiper-container:hover .acprod-nav-btn {
    opacity: 1;
    pointer-events: auto;
}

.acprod-nav-btn:hover {
    background: var(--acp-primary);
    color: white;
}

.acprod-swiper-container .acprod-nav-btn:first-of-type {
    /* Prev */
    left: -20px;
}

.acprod-swiper-container .acprod-nav-btn:last-of-type {
    /* Next */
    right: -20px;
}

@media (max-width: 768px) {
    .acprod-swiper-container .acprod-nav-btn:first-of-type {
        left: 0;
    }

    .acprod-swiper-container .acprod-nav-btn:last-of-type {
        right: 0;
    }
}


/* ===== NEW PRODUCT SLIDER DESIGN (Jan 24) ===== */

/* 1. SECTION HEADER */
.acprod-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center Vertically */
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 16px;

    /* No Background Strip */
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.acprod-header-left {
    flex: 1;
}

/* Title bar: Red Vertical Bar + Custom Text */
.acprod-block-title {
    font-size: 28px;
    /* Larger */
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 0;
    border-left: none;
    text-transform: none;
    /* Let user decide case */
}

/* Vertical Red Bar */
.acprod-block-title::before {
    content: '';
    display: block;
    width: 6px;
    height: 36px;
    /* Taller matches font */
    background: #ef4444;
    border-radius: 0;
    /* Square/Rectangle as per image */
}

.acprod-block-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* 2. NAV BUTTONS (Top Right) */
.acprod-header-right {
    display: flex;
    gap: 8px;
}

.acprod-nav-btn {
    position: static;
    /* No longer absolute */
    transform: none;
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    /* Square with radius */
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    color: #374151;
}

.acprod-nav-btn:hover {
    border-color: #ef4444;
    background: #fff;
    color: #ef4444;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Subtle shadow on hover */
}

.acprod-nav-btn .material-symbols-outlined {
    font-size: 20px;
}

/* 3. MINIMAL CARD STYLE */
.acprod-card-minimal {
    border: none;
    box-shadow: none;
    /* Shadow handled by hover or remove completely as per flat design? */
    /* Reference image has shadow on card? Hard to tell, looks like flat or very subtle shadow */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    background: #fff;
}

.acprod-card-minimal:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.acprod-card-minimal .acprod-card__body {
    padding: 16px;
    text-align: left;
    /* Left align */
    justify-content: flex-start;
}

.acprod-card-minimal .acprod-card__title {
    text-align: left;
    font-size: 15px;
    /* Slight bump */
    font-weight: 600;
    margin-bottom: 4px;
    /* Reduce gap */
    height: 48px;
    /* Fixed height for 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.acprod-card-minimal .acprod-card__title a {
    color: #1f2937;
}

.acprod-card-minimal .acprod-card__title a:hover {
    color: #ef4444;
}

/* Price Row Minimal (Inline) */
.acprod-card__price-row.minimal-row {
    justify-content: flex-start;
    flex-direction: row;
    /* Inline */
    align-items: baseline;
    gap: 8px;
    margin-top: 0;
}

.acprod-card__price-row.minimal-row .price-current {
    font-size: 16px;
    font-weight: 700;
    color: #ef4444;
}

.acprod-card__price-row.minimal-row .price-old {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .acprod-section-header {
        align-items: flex-start;
    }

    .acprod-header-right {
        margin-left: auto;
    }
}

/* Hotline List Widget */
.acprod-widget--hotlines {
    border: 1px solid rgba(242, 13, 13, 0.15);
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
}

.acprod-hotline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acprod-hotline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.acprod-hotline-item:hover {
    border-color: var(--acp-primary);
    background: #fef2f2;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(242, 13, 13, 0.1);
}

.acprod-hotline-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--acp-primary) 0%, #dc2626 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acprod-hotline-icon .material-symbols-outlined {
    color: white;
    font-size: 20px;
}

.acprod-hotline-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acprod-hotline-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.2;
}

.acprod-hotline-number {
    font-size: 15px;
    color: var(--acp-text);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.acprod-hotline-item:hover .acprod-hotline-number {
    color: var(--acp-primary);
}

/* ========================================
   VIDEO REVIEW GRID LAYOUT
   ======================================== */

/* Grid Container: 2 columns on desktop */
.acprod-videos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 20px;
}

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

/* Video Block Wrapper */
.acprod-video-block {
    /* Default for all videos */
}

/* Regular Videos: Full Width (Span 2 columns) */
.acprod-video-block--regular {
    grid-column: 1 / -1;
    /* Span entire row */
}

/* Shorts: Occupy 1 column (default behavior) */
.acprod-video-block--short {
    /* Occupy 1 column automatically */
}

/* Video Title */
.acprod-video-title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #111827;
}

/* Video Wrapper with Aspect Ratio */
.acprod-video-wrap {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding-bottom: 56.25% !important;
    height: 0 !important;
    /* Force for padding-bottom trick */
}

/* Regular Video: 16:9 Aspect Ratio */
.acprod-video-block--regular .acprod-video-wrap {
    padding-bottom: 56.25% !important;
    height: 0 !important;
}

/* Shorts Video: 9:16 Aspect Ratio */
.acprod-video-block--short .acprod-video-wrap {
    padding-bottom: 177.78% !important;
    height: 0 !important;
    max-width: 400px;
    margin: 0 auto;
}

/* Iframe positioning */
.acprod-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobile: Stack all videos vertically */
@media (max-width: 767px) {
    .acprod-video-block--short .acprod-video-wrap {
        max-width: 100%;
        /* Full width on mobile */
    }
}

/* ========================================
   SPECS PROSE CONTENT (WYSIWYG)
   ======================================== */

.acprod-prose {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

.acprod-prose p {
    margin: 0 0 16px;
}

.acprod-prose p:last-child {
    margin-bottom: 0;
}

.acprod-prose strong {
    font-weight: 700;
    color: #111827;
}

.acprod-prose ul,
.acprod-prose ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.acprod-prose li {
    margin-bottom: 8px;
}

.acprod-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.acprod-prose table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.acprod-prose table tr:last-child td {
    border-bottom: none;
}

.acprod-prose table td:first-child {
    font-weight: 600;
    color: #111827;
    width: 40%;
}

.acprod-prose table td:last-child {
    color: #4b5563;
}

.acprod-prose a {
    color: var(--acp-primary);
    text-decoration: underline;
}

.acprod-prose a:hover {
    color: var(--acp-primary-hover);
}

/* ========================================
   SIDEBAR WIDGETS - BOLD TEXT
   ======================================== */

/* Category list - bold category names */
.acprod-cat-list li a span:first-child {
    font-weight: 600;
}

/* New products - bold product names */
.acprod-new-item__info h4 {
    font-weight: 600;
}

/* ========================================
   MOBILE FILTER OFFCANVAS (Added by Request)
   Only affects screens < 1024px (Mobile/Tablet)
   ======================================== */
.acprod-filter-toggle {
    display: none;
}

.acprod-filter-overlay {
    display: none;
}

.acprod-filter-header-mobile {
    display: none;
}

@media (max-width: 1023px) {

    /* 1. Toggle Button */
    .acprod-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #ef4444;
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 16px;
        width: 100%;
        /* Full width button for easy access */
        justify-content: center;
        box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
    }

    .acprod-filter-toggle .material-symbols-outlined {
        font-size: 20px;
    }

    /* 2. Sidebar Offcanvas */
    .acprod-sidebar-filter {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: #fff;
        z-index: 9999;
        padding: 20px;
        padding-top: 20px;
        overflow-y: auto;
        transform: translateX(-100%);
        /* Hidden Left */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .acprod-sidebar-filter.active {
        transform: translateX(0);
        /* Slide In */
    }

    /* 3. Overlay */
    .acprod-filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }

    .acprod-filter-overlay.active {
        opacity: 1;
        visibility: visible;
        display: block;
    }

    /* 4. Mobile Header inside Sidebar */
    .acprod-filter-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .acprod-filter-header-mobile h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

    .acprod-filter-close {
        background: none;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 4px;
    }

    /* 5. Layout Adjustments */
    .acprod-archive-layout {
        display: block;
        /* Stack Sidebar & Content */
    }
}

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

    /* ── 1. PRODUCT ARCHIVE GRID: 2 cột ── */
    .acprod-grid-u {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── 2. PRODUCT CARD: thu nhỏ cho vừa 2 cột ── */
    .acprod-card {
        border-radius: 12px;
    }

    .acprod-card__body {
        padding: 8px 10px 10px;
    }

    .acprod-card__brand {
        font-size: 9px;
        margin-bottom: 3px;
    }

    .acprod-card__title {
        font-size: 12px;
        height: 34px;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .acprod-card__title a {
        font-size: 12px;
    }

    .acprod-card__price-row {
        margin-bottom: 8px;
        gap: 4px;
    }

    .price-current {
        font-size: 13px;
    }

    .price-old {
        font-size: 11px;
    }

    .acprod-btn-full {
        font-size: 11px;
        padding: 7px 0;
    }

    /* Rating stars nhỏ lại */
    .acprod-card__rating .material-symbols-outlined {
        font-size: 11px;
    }

    /* ── 3. TRANG WRAP padding giảm ── */
    .acprod-wrap {
        padding: 12px 10px 60px;
    }

    /* ── 4. SINGLE PRODUCT: thu nhỏ font ── */
    .acprod-title {
        font-size: 18px !important;
        margin-bottom: 8px;
    }

    .acprod-price {
        font-size: 22px;
    }

    .acprod-sale {
        font-size: 14px;
    }

    .acprod-price-box {
        padding: 12px;
    }

    .acprod-short-desc {
        font-size: 13px;
        padding: 10px;
    }

    /* ── 5. TABS chữ nhỏ hơn ── */
    .acprod-tab {
        font-size: 12px;
        padding: 10px 6px;
        gap: 4px;
    }

    .acprod-tab .material-symbols-outlined {
        font-size: 16px;
    }

    /* ── 6. SẢN PHẨM LIÊN QUAN: 2 cột ── */
    .acprod-related__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Related card thu nhỏ */
    .acprod-related__grid .acprod-card__body {
        padding: 8px 10px 10px;
    }

    .acprod-related__grid .acprod-card__title {
        font-size: 12px;
    }

    /* ── 7. TOOLBAR ARCHIVE thu gọn ── */
    .acprod-archive-title {
        font-size: 16px;
    }

    .acprod-toolbar {
        gap: 8px;
        margin-bottom: 12px;
    }

    .acprod-sort select {
        min-width: 120px;
        font-size: 12px;
        padding: 6px 12px;
    }

    .acprod-sort label {
        font-size: 12px;
    }

    /* ── 8. SIDEBAR WIDGET (single page) thu nhỏ ── */
    .acprod-widget-title {
        font-size: 15px;
    }

    .acprod-hotline-item {
        padding: 10px;
    }

    /* ── 9. PAGINATION thu nhỏ ── */
    .acprod-pagination {
        margin-top: 24px;
    }

    .acprod-pagination .page-numbers a,
    .acprod-pagination .page-numbers span {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* ── 10. SHORTCODE GRID [ac_products layout="grid"]: 2 cột ── */
    .acprod-grid-dyn {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── 11. SHORTCODE SLIDER [ac_products layout="slider"]: 2 slides visible ── */
    /* Override swiper để hiển thị 2 sản phẩm mỗi hàng trên mobile */
    .acprod-swiper-container .swiper-slide {
        width: calc(50% - 5px) !important;
    }

    /* Thu nhỏ title trong card-minimal (shortcode) */
    .acprod-card-minimal .acprod-card__title {
        font-size: 12px;
        height: 32px;
    }

    .acprod-card-minimal .acprod-card__body {
        padding: 8px 10px 10px;
    }

    /* Thu nhỏ section title của shortcode */
    .acprod-block-title {
        font-size: 18px;
    }

    .acprod-block-title::before {
        height: 24px;
        width: 4px;
    }

    /* Ẩn nav buttons shortcode slider trên mobile */
    .acprod-header-right .acprod-nav-btn {
        display: none;
    }

    /* ── 12. Related section heading thu nhỏ ── */
    .acprod-heading {
        font-size: 18px;
    }

    .acprod-related__header {
        margin-bottom: 14px;
    }
}

/* ============================================================
   SINGLE PRODUCT PAGE - MOBILE FIXES (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {

    /* ── 1. BREADCRUMBS: 1 dòng, ellipsis, ẩn tên sản phẩm ── */
    .acprod-breadcrumbs {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        margin-bottom: 12px !important;
        font-size: 12px !important;
        gap: 4px !important;
    }

    /* Ẩn tên sản phẩm dài (.current) - bên dưới đã có rồi */
    .acprod-breadcrumbs .current {
        display: none !important;
    }

    /* Ẩn luôn mũi tên cuối (trước .current) */
    .acprod-breadcrumbs .material-symbols-outlined:last-of-type {
        display: none !important;
    }

    /* Các link breadcrumb: không wrap, cắt nếu quá dài */
    .acprod-breadcrumbs a {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100px !important;
    }

    /* ── 2. HERO BOX: full-width, bỏ border-radius, padding, shadow ── */
    .acprod-hero {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        /* Phá ra khỏi container để full-width */
        margin-left: calc(-1 * var(--container-px, 1rem)) !important;
        margin-right: calc(-1 * var(--container-px, 1rem)) !important;
        margin-bottom: 16px !important;
    }

    /* ── 3. GALLERY MAIN ẢNH: chạm sát 2 mép, không border-radius ── */
    .acprod-gallery {
        gap: 0 !important;
    }

    .acprod-gallery__main {
        border-radius: 0 !important;
        border: none !important;
        background: #fff !important;
    }

    /* ── 4. THUMBNAILS: full trong khung, bỏ khoảng trắng ── */
    .acprod-thumbs-slider-wrap {
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    .acprod-thumb {
        padding: 2px !important;
        /* Giảm khoảng trắng trong thumbnail */
        border-radius: 6px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #fff !important;
    }

    /* Viền đỏ khi active: dùng outline + subpixel rendering mượt hơn */
    .acprod-thumb.active {
        border-color: var(--acp-primary) !important;
        outline: 1.5px solid var(--acp-primary) !important;
        outline-offset: 0px !important;
        box-shadow: none !important;
        /* Bỏ double-shadow răng cưa */
        border-radius: 6px !important;
        /* Rendering mượt */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    .acprod-thumb__img {
        border-radius: 4px !important;
    }

    /* Nút prev/next thumb nhỏ hơn */
    .acprod-slider-btn {
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
    }

    .acprod-slider-btn .material-symbols-outlined {
        font-size: 16px !important;
    }

    /* ── 5. INFO PANEL: padding cân đối ── */
    .acprod-hero__grid {
        gap: 0 !important;
    }

    .acprod-info {
        padding: 14px 14px 16px !important;
    }

    /* ── 6. THUMBNAIL: padding=0 (ảnh full viền), bỏ border-radius ── */
    .acprod-thumb {
        padding: 0 !important;
        border-radius: 0 !important;
        border: 2px solid #e5e7eb !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .acprod-thumb.active {
        border-color: var(--acp-primary) !important;
        outline: none !important;
        /* Bỏ outline, chỉ dùng border để tránh răng cưa */
        box-shadow: none !important;
        border-radius: 0 !important;
        /* Rendering smooth */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    .acprod-thumb__img {
        border-radius: 0 !important;
        /* Ảnh cũng vuông luôn */
        width: 100% !important;
        height: 100% !important;
    }

    /* ── 7. BUTTONS 2 CỘT CÙNG 1 HÀNG ── */
    .acprod-actions {
        flex-direction: row !important;
        gap: 8px !important;
    }

    .acprod-btn {
        flex: 1 !important;
        padding: 10px 6px !important;
        border-radius: 8px !important;
    }

    .acprod-btn__main {
        font-size: 13px !important;
        gap: 4px !important;
        margin-bottom: 1px !important;
        text-align: center !important;
    }

    .acprod-btn__main .material-symbols-outlined {
        font-size: 16px !important;
    }

    .acprod-btn__sub {
        font-size: 10px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* ── 8. TEXT TRANG CHI TIẾT GỌN HƠN ── */
    /* Tiêu đề sản phẩm */
    .acprod-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* Giá */
    .acprod-price {
        font-size: 20px !important;
    }

    .acprod-sale {
        font-size: 13px !important;
    }

    /* VAT text */
    .acprod-vat {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    /* Cam kết - container gap nhỏ hơn */
    .acprod-commits {
        gap: 4px !important;
        margin-bottom: 12px !important;
    }

    .acprod-commit {
        font-size: 12px !important;
        padding: 4px 0 !important;
        gap: 6px !important;
    }

    .acprod-commit .material-symbols-outlined {
        font-size: 16px !important;
    }

    /* Rating meta */
    .acprod-meta {
        margin-bottom: 8px !important;
    }

    .acprod-rating .material-symbols-outlined {
        font-size: 14px !important;
    }

    .acprod-status {
        font-size: 12px !important;
    }
}

/* ============================================================
   PRODUCT CONTENT BOX / TABS - MOBILE FIXES (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {

    /* ── 1. KHUNG NỘI DUNG: full-width, bỏ bo góc ── */
    .acprod-box {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        /* Thoát container để full-width */
        margin-left: calc(-1 * var(--container-px, 1rem)) !important;
        margin-right: calc(-1 * var(--container-px, 1rem)) !important;
    }

    /* ── 2. TAB: không xuống dòng, font nhỏ hơn ── */
    .acprod-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

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

    .acprod-tab {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 12px 8px !important;
        gap: 4px !important;
        flex: 1 !important;
        /* Chia đều chiều rộng */
    }

    .acprod-tab .material-symbols-outlined {
        font-size: 15px !important;
    }

    /* ── 3. NỘI DUNG TAB: padding nhỏ hơn ── */
    .acprod-content {
        padding: 16px !important;
    }

    /* ── 4. CHỮ TRONG TAB: đồng nhất 13px ── */
    .acprod-prose {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Đồng nhất tất cả heading và text con bên trong */
    .acprod-prose p,
    .acprod-prose li,
    .acprod-prose td,
    .acprod-prose th,
    .acprod-prose span,
    .acprod-pane>p,
    .acprod-pane>div>p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .acprod-prose h1,
    .acprod-prose h2 {
        font-size: 16px !important;
    }

    .acprod-prose h3 {
        font-size: 15px !important;
    }

    .acprod-prose h4,
    .acprod-prose h5,
    .acprod-prose h6 {
        font-size: 14px !important;
    }

    /* Bảng thông số */
    .acprod-prose table {
        font-size: 13px !important;
    }
}