/*
Theme Name: VNCraft Theme
Description: Premium Artisan Minimalist Theme for VNCraft
Author: System Architect
Version: 1.1.0
*/

:root {
    --bg-cream: #FDFBF7;
    --text-brown: #4A3B32;
    --text-muted: #8A7B72;
    --accent-blue: #78A2B7;
    --accent-sand: #D9C8B4;
    --line-soft: 1px solid rgba(74, 59, 50, 0.1);
    --radius-organic: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body {
    background-color: var(--bg-cream);
    color: var(--text-brown);
    font-family: 'Playfair Display', serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-image: radial-gradient(circle at 10% 20%, rgba(217, 200, 180, 0.15) 0%, transparent 50%), 
                      radial-gradient(circle at 90% 80%, rgba(120, 162, 183, 0.1) 0%, transparent 50%);
}

.vnc-container { max-width: 1200px; margin: 0 auto; padding: 60px 5%; }
.vnc-sans { font-family: 'Inter', -apple-system, sans-serif; }

/* NÚT BẤM */
.vnc-btn {
    display: inline-block; width: 100%; text-align: center; padding: 12px 0; background: transparent;
    border: 1px solid var(--accent-blue); color: var(--accent-blue); font-size: 12px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; border-radius: 30px; cursor: pointer;
    transition: all 0.3s ease; text-decoration: none;
}
.vnc-btn:hover { background: var(--accent-blue); color: #fff; }

/* LƯỚI SẢN PHẨM & CARD */
.vnc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; width: 100%; }
.vnc-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; transition: transform 0.4s ease; }
.vnc-card:hover { transform: translateY(-8px); }
.vnc-card > a { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; text-decoration: none; }
.vnc-card-thumb { width: 100%; height: 320px; border-radius: var(--radius-organic); border: var(--line-soft); margin-bottom: 20px; overflow: hidden; background: #fff; position: relative; }
.vnc-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; }
.vnc-card:hover .vnc-card-thumb img { transform: scale(1.05); }
.vnc-title { font-size: 1.1rem; color: var(--text-brown); font-weight: 500; margin-bottom: 8px; }
.vnc-card-footer { margin-top: auto !important; padding-top: 16px !important; }
.vnc-price { color: var(--accent-blue); font-size: 1.1rem; margin-bottom: 16px; font-weight: 600; }

/* NEW: CATEGORY CIRCLES */
.vnc-categories { display: flex; justify-content: center; gap: 40px; margin-bottom: 80px; flex-wrap: wrap; }
.vnc-cat-item { text-align: center; text-decoration: none; color: var(--text-brown); transition: transform 0.3s ease; }
.vnc-cat-item:hover { transform: translateY(-5px); }
.vnc-cat-thumb { width: 100px; height: 100px; border-radius: 50%; background: var(--accent-sand); margin: 0 auto 12px; border: var(--line-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vnc-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vnc-cat-name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* NEW: OUR STORY SECTION */
.vnc-story { display: flex; align-items: center; gap: 60px; background: #fff; border-radius: var(--radius-organic); border: var(--line-soft); overflow: hidden; margin-bottom: 80px; }
.vnc-story-img { flex: 1; min-height: 400px; background: var(--accent-sand); position: relative; }
.vnc-story-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.vnc-story-content { flex: 1; padding: 60px 60px 60px 0; }

@media (max-width: 1024px) {
    .vnc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vnc-story { flex-direction: column; }
    .vnc-story-content { padding: 40px; }
    .vnc-story-img { width: 100%; min-height: 300px; }
}
@media (max-width: 768px) {
    .vnc-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .vnc-container { padding-top: 40px; }
    .vnc-categories { gap: 20px; }
    .vnc-cat-thumb { width: 80px; height: 80px; }
}

/* ==========================================================================
   PREMIUM POLISH: NÂNG CẤP CHIỀU SÂU VÀ HIỆU ỨNG (ARTISAN SAAS)
   ========================================================================== */

/* 1. Lột xác Thẻ Sản Phẩm (Card) với hiệu ứng nổi 3D mượt mà */
.vnc-card {
    background: #ffffff !important;
    border: 1px solid rgba(74, 59, 50, 0.06) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vnc-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.12) !important;
    border-color: rgba(120, 162, 183, 0.4) !important;
}

/* 2. Ép bo góc chuẩn xác cho ảnh sản phẩm bên trong thẻ */
.vnc-card-thumb {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05) !important;
}

/* 3. Nâng cấp Nút bấm (CTA) thành dạng Gradient nổi khối */
.vnc-btn {
    background: linear-gradient(135deg, var(--accent-blue), #5A8A9F) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(120, 162, 183, 0.25) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}

.vnc-btn:hover {
    background: linear-gradient(135deg, #5A8A9F, var(--accent-blue)) !important;
    box-shadow: 0 8px 25px rgba(120, 162, 183, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* 4. Nâng cấp Thanh Điều Hướng (Header) với kính mờ siêu nét */
.vnc-header {
    background: rgba(253, 251, 247, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 4px 30px rgba(74, 59, 50, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 5. Tối ưu Khối Review & Các Box tĩnh */
section > div[style*="background: #fff"] {
    box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important;
    transition: transform 0.3s ease !important;
}
section > div[style*="background: #fff"]:hover {
    transform: translateY(-4px) !important;
}

/* ==========================================================================
   ORGANIC ARTISAN HERO BANNER (CHUẨN IMAGE_91EFC2)
   ========================================================================== */
.vnc-organic-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F2EC; /* Màu nền be cát dịu nhẹ */
    border-radius: 0 0 60px 60px; /* Bo góc sóng lượn dưới đáy */
    padding: 100px 5% 120px;
    margin-bottom: 80px;
    overflow: hidden;
    border: none;
}

/* Họa tiết mảng màu hữu cơ */
.organic-shape {
    position: absolute;
    background: #D9C8B4;
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
}
.shape-1 {
    width: 400px;
    height: 400px;
    top: -150px;
    left: -150px;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}
.shape-2 {
    width: 250px;
    height: 300px;
    bottom: -50px;
    right: 35%;
    border-radius: 50% 50% 30% 70% / 60% 40% 70% 40%;
    background: rgba(120, 162, 183, 0.2); 
}

/* Khối Nội dung Trái */
.hero-content-left {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
    position: relative;
    z-index: 2;
}
.hero-title {
    font-size: clamp(2.5rem, 4vw, 3.6rem);
    color: #2C3539; 
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -1px;
}
.hero-desc {
    color: #4A3B32;
    font-size: 1rem;
    margin-bottom: 35px;
    line-height: 1.6;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}
.hero-btn {
    background: #4A7C8C !important; /* Màu xanh cổ vịt bản thiết kế */
    color: #ffffff !important;
    padding: 16px 36px !important;
    border-radius: 6px !important;
    border: none !important;
    width: max-content !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.hero-btn:hover {
    background: #365b67 !important;
    box-shadow: 0 10px 20px rgba(74, 124, 140, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Khối Cắt lớp Ảnh (Collage) Phải */
.hero-collage-right {
    flex: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    position: relative;
    z-index: 2;
}
.collage-item {
    position: relative;
    transition: transform 0.4s ease;
}
.collage-item:hover {
    transform: translateY(-8px);
}
.collage-item img {
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

.main-item img {
    width: 340px;
    height: 420px;
    border-radius: 40% 40% 20% 20%; /* Tạo dáng vuốt mềm mộc mạc */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

.side-items-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.side-item img {
    width: 190px;
    height: 190px;
}

/* Thẻ giá treo tròn (Floating Tags) */
.floating-tag {
    position: absolute;
    background: #D4BFA6; /* Màu đất nung */
    color: #4A3B32;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    font-family: 'Playfair Display', serif;
    padding: 12px;
    line-height: 1.2;
    z-index: 10;
}
/* Hiệu ứng lỗ xỏ dây */
.floating-tag::before {
    content: '';
    position: absolute;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #F8F2EC;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.tag-main {
    bottom: 50px;
    right: -25px;
    width: 120px;
    height: 120px;
}
.tag-side {
    bottom: -15px;
    right: -25px;
    width: 95px;
    height: 95px;
}
.tag-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    margin-top: 6px;
}
.tag-price {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #2C3539;
    font-size: 1.05rem;
}
/* Ẩn giá cũ gạch ngang trong thẻ tròn cho đỡ chật */
.tag-price del { display: none !important; }

/* Mobile Bọc thép */
@media (max-width: 1024px) {
    .vnc-organic-hero { flex-direction: column; text-align: center; padding: 60px 5%; border-radius: 0 0 30px 30px; }
    .hero-content-left { margin-bottom: 60px; display: flex; flex-direction: column; align-items: center; }
    .hero-collage-right { justify-content: center; width: 100%; flex-wrap: wrap; }
    .main-item img { width: 300px; height: 380px; }
}

/* ==========================================================================
   DAILY DEALS SECTION (CHUẨN IMAGE_91FB24)
   ========================================================================== */
.vnc-daily-deals {
    margin-bottom: 80px;
}

.deals-wrapper {
    background: #FDFBF7;
    border: 1px solid #E8E2D9;
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(74, 59, 50, 0.03);
}

/* Cột Trái */
.deals-info {
    flex: 1;
    min-width: 150px;
}
.deals-title {
    font-size: 1.5rem;
    color: #2C3539;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.deals-subtitle {
    color: #4A3B32;
    font-size: 1rem;
    margin-bottom: 16px;
}

/* Nút Sage Green */
.deals-btn {
    background: #9FA189 !important; /* Màu xanh rêu nhạt */
    color: #ffffff !important;
    border: none !important;
    padding: 8px 24px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    display: inline-block;
    box-shadow: none !important;
}
.deals-btn:hover {
    background: #878972 !important;
}

/* Cột Giữa: Timer */
.deals-timer {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.timer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.timer-label {
    font-size: 11px;
    color: #4A3B32;
    font-weight: 500;
}
.timer-box {
    background: #EEF0EC;
    color: #5A716A;
    font-size: 1.6rem;
    font-weight: 400;
    padding: 10px 14px;
    border-radius: 8px;
    min-width: 60px;
    text-align: center;
}
.timer-colon {
    font-size: 1.5rem;
    color: #5A716A;
    padding-bottom: 12px;
    font-weight: 300;
}

/* Cột Phải: Product Embedded */
.deals-product {
    background: #F4F1EB;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1.5;
    min-width: 350px;
}
.dp-image img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
}
.dp-details {
    flex: 1;
}
.dp-title {
    font-size: 1.1rem;
    color: #2C3539;
    font-weight: 600;
    margin-bottom: 4px;
}
.dp-price {
    font-size: 1.4rem;
    color: #5A716A;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dp-price del {
    font-size: 0.9rem;
    color: #8A7B72;
    font-weight: 400;
}
.dp-price ins {
    text-decoration: none;
}
.dp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dp-icon {
    font-size: 1.2rem;
    color: #9FA189;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .deals-wrapper { flex-direction: column; align-items: flex-start; }
    .deals-product { width: 100%; }
}

/* ==========================================================================
   PREMIUM ADD TO CART (PILL BUTTON) - DAILY DEALS
   ========================================================================== */
.premium-add-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #2C3539 !important; /* Đen nhám cao cấp */
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 30px !important; /* Nút dáng viên thuốc */
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: auto !important; /* Hủy ép viền 100% để nút nhỏ gọn lại */
}

.premium-add-btn:hover {
    background: #4A7C8C !important; /* Sáng lên màu Xanh cổ vịt khi Hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(74, 124, 140, 0.25) !important;
    color: #ffffff !important;
}

.premium-add-btn svg {
    transition: transform 0.3s ease !important;
}

.premium-add-btn:hover svg {
    transform: scale(1.15) !important;
}

/* ==========================================================================
   CURATED ARTISAN FINDS BANNER (IMAGE_9268A2)
   ========================================================================== */
.vnc-curated-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F2F1ED; /* Nền xám be nhạt */
    border: 1px solid rgba(74, 59, 50, 0.08);
    border-radius: 16px;
    padding: 60px 5%;
    margin-bottom: 80px;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

/* Họa tiết bong bóng bọt nước chìm */
.vnc-curated-banner::before, 
.vnc-curated-banner::after {
    content: '';
    position: absolute;
    border: 3px solid rgba(120, 162, 183, 0.15);
    border-radius: 50%;
}
.vnc-curated-banner::before { width: 50px; height: 50px; top: 30px; left: 8%; }
.vnc-curated-banner::after { width: 120px; height: 120px; bottom: -30px; right: 3%; opacity: 0.6; }

/* Cột Trái: Text & Nút */
.curated-left {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    z-index: 2;
}
.curated-title {
    font-size: 1.8rem;
    color: #2C3539;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 1.2;
    font-weight: 600;
}
.curated-subtitle {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    text-transform: none;
    font-size: 2.2rem;
    font-weight: 400;
    color: #4A3B32;
}
.curated-desc {
    font-size: 0.95rem;
    color: #4A3B32;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}
.curated-btn {
    background: #5A7B8C !important; /* Xanh cổ vịt đậm */
    color: #fff !important;
    border: none !important;
    padding: 12px 32px !important;
    width: auto !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}
.curated-btn:hover {
    background: #4A6B7C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(90, 123, 140, 0.3) !important;
}

/* Cột Phải: Ảnh ghép Collage */
.curated-right {
    flex: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    z-index: 2;
}
.curated-item {
    position: relative;
    transition: transform 0.4s ease;
}
.curated-item:hover { transform: translateY(-5px); }

/* Tạo dáng ảnh organic tự nhiên */
.c-item-1 img {
    width: 280px;
    height: 240px;
    object-fit: cover;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}
.c-item-2 img {
    width: 220px;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* Định vị thẻ giá treo */
.tag-c1 { bottom: -25px; right: -10px; width: 105px; height: 105px; }
.tag-c2 { bottom: -35px; right: 10px; width: 100px; height: 100px; background: #C8B29E; } /* Đổi nhẹ màu thẻ số 2 cho sinh động */

/* Mobile Responsive */
@media (max-width: 992px) {
    .vnc-curated-banner { flex-direction: column; text-align: center; padding: 40px 5%; }
    .curated-left { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
    .curated-right { flex-wrap: wrap; width: 100%; }
}

/* ==========================================================================
   MINI CART ICON - FLOATING TAGS
   ========================================================================== */
.tag-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.mini-tag-cart {
    background: #5A7B8C !important; /* Xanh cổ vịt tĩnh lự */
    color: #ffffff !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(90, 123, 140, 0.3) !important;
}

.mini-tag-cart:hover {
    background: #2C3539 !important; /* Đen nhám khi di chuột */
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   CATALOG CAROUSEL (IMAGE_92CA19)
   ========================================================================== */
.catalog-carousel-section {
    display: flex;
    align-items: center;
}

.catalog-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 10px 50px; /* Khoảng trống dưới đáy để chứa thẻ treo */
    -ms-overflow-style: none;  /* Ẩn scrollbar IE/Edge */
    scrollbar-width: none;  /* Ẩn scrollbar Firefox */
    width: 100%;
}
.catalog-slider::-webkit-scrollbar {
    display: none; /* Ẩn scrollbar Chrome/Safari */
}

.catalog-slide-item {
    flex: 0 0 auto;
    width: 180px; /* Chiều rộng thẻ tĩnh */
    scroll-snap-align: start;
}

.catalog-img-wrapper {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(74, 59, 50, 0.08);
    background: #fff;
}
.catalog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.catalog-slide-item:hover .catalog-img-wrapper img {
    transform: scale(1.08);
}

/* Định vị thẻ giá chồm lên ảnh */
.tag-catalog {
    position: relative;
    bottom: auto;
    right: auto;
    margin: -35px auto 0; /* Kéo thẻ giá lên đè vào viền ảnh */
    width: 115px;
    height: 115px;
    background: #D4BFA6; /* Màu đất nung bản thiết kế */
    z-index: 10;
}
.tag-catalog::before {
    background: #FDFBF7; /* Lỗ đục trùng màu nền trang */
}

/* Nút Điều hướng Mũi tên */
.slider-btn {
    background: transparent;
    border: 1px solid rgba(74, 59, 50, 0.15);
    color: #4A3B32;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 20;
    transition: all 0.3s ease;
}
.slider-btn:hover {
    border-color: #5A7B8C;
    color: #5A7B8C;
    background: rgba(90, 123, 140, 0.05);
}
.prev-btn { left: -10px; }
.next-btn { right: -10px; }

/* Bọc thép Mobile */
@media (max-width: 768px) {
    .slider-btn { display: none; } /* Mobile cho khách dùng tay vuốt mượt hơn */
    .catalog-nav { flex-wrap: wrap; gap: 16px; }
    .catalog-carousel-section { padding: 0 10px; }
}

/* ==========================================================================
   FIX LỖI THẺ GIÁ CATALOG (TỪ TRÒN SANG CHỮ NHẬT BO GÓC CHUẨN MẪU)
   ========================================================================== */
.tag-catalog {
    border-radius: 12px !important; /* Phá vỡ hình tròn 50%, ép về chữ nhật bo góc mềm mại */
    width: 120px !important;
    height: auto !important;
    min-height: 95px !important;
    padding: 18px 10px 12px !important;
    margin: -30px auto 0 !important; /* Neo bám chặt vào mép dưới của ảnh */
}

/* Căn chỉnh lại "lỗ đục xỏ dây" nằm chính giữa mép trên của thẻ chữ nhật */
.tag-catalog::before {
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Đảm bảo tên sản phẩm có không gian thở, không bị ép cong theo viền tròn cũ */
.tag-catalog .tag-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   OUR STORY SECTION - ORGANIC LAYOUT (FIX 100% DESIGN)
   ========================================================================== */
.vnc-story-section {
    position: relative;
    padding: 100px 5%;
    margin-bottom: 60px;
    background-color: transparent;
    overflow: hidden; /* Cắt các họa tiết bong bóng thừa */
}

/* Họa tiết bong bóng chìm trang trí */
.story-bubble { position: absolute; border-radius: 50%; border: 3px solid rgba(120, 162, 183, 0.15); }
.bubble-1 { width: 80px; height: 80px; top: 20%; right: 10%; }
.bubble-2 { width: 150px; height: 150px; bottom: -30px; left: 5%; border-width: 5px; opacity: 0.5; }

/* Vùng chứa 2 cột */
.story-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* KHỐI ẢNH (BÊN TRÁI) - Bo góc organic bất đối xứng */
.story-image-wrapper {
    flex: 1.1;
    position: relative;
    border-radius: 20px 80px 20px 20px; /* Góc trên bên phải vát sâu chuẩn thiết kế */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(74, 59, 50, 0.15);
    height: 380px;
}

.story-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lớp phủ mờ (Gradient) và Chữ "LET'S DISCOVER CRAFT" trên ảnh */
.story-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(74, 59, 50, 0.9), transparent);
    padding: 60px 20px 20px;
    text-align: center;
}

.story-image-overlay span {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* KHỐI NỘI DUNG (BÊN PHẢI) */
.story-content-wrapper {
    flex: 1;
}

.story-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #4A3B32;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.story-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2C3539;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Đường kẻ sóng SVG */
.story-wavy-divider {
    width: 100%;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6c6 0 6-4 12-4s6 4 12 4 6 4 12 4 6-4 12-4' fill='none' stroke='%2378A2B7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin-bottom: 25px;
    opacity: 0.8;
}

.story-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #2C3539;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.story-desc {
    color: #4A3B32;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Hai Nút Bấm song song */
.story-actions {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap; /* Ép không rớt dòng trên desktop */
}

.btn-solid-blue, .btn-outline-blue {
    flex: 1; /* Chia đều 50/50 chiều rộng */
    padding: 12px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
    border-radius: 6px !important;
}

.btn-solid-blue {
    background: #5A7B8C !important;
    color: #ffffff !important;
    border: 2px solid #5A7B8C !important;
}

.btn-solid-blue:hover {
    background: #4A6B7C !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(90, 123, 140, 0.3) !important;
}

.btn-outline-blue {
    background: transparent !important;
    color: #5A7B8C !important;
    border: 2px solid #5A7B8C !important;
}

.btn-outline-blue:hover {
    background: #5A7B8C !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Bọc thép Mobile */
@media (max-width: 992px) {
    .story-container { flex-direction: column; text-align: center; }
    .story-image-wrapper { width: 100%; border-radius: 20px 60px 20px 20px; }
    .story-wavy-divider { background-position: center; }
}
@media (max-width: 576px) {
    .story-actions { flex-direction: column; }
    .btn-solid-blue, .btn-outline-blue { width: 100%; }
}

/* ==========================================================================
   OUR STORY SECTION - ORGANIC LAYOUT (FIX 100% DESIGN)
   ========================================================================== */
.vnc-story-section {
    position: relative;
    padding: 100px 5%;
    margin-bottom: 60px;
    background-color: transparent;
    overflow: hidden; /* Cắt các họa tiết bong bóng thừa */
}

/* Họa tiết bong bóng chìm trang trí */
.story-bubble { position: absolute; border-radius: 50%; border: 3px solid rgba(120, 162, 183, 0.15); }
.bubble-1 { width: 80px; height: 80px; top: 20%; right: 10%; }
.bubble-2 { width: 150px; height: 150px; bottom: -30px; left: 5%; border-width: 5px; opacity: 0.5; }

/* Vùng chứa 2 cột */
.story-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* KHỐI ẢNH (BÊN TRÁI) - Bo góc organic bất đối xứng */
.story-image-wrapper {
    flex: 1.1;
    position: relative;
    border-radius: 20px 80px 20px 20px; /* Góc trên bên phải vát sâu chuẩn thiết kế */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(74, 59, 50, 0.15);
    height: 380px;
}

.story-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lớp phủ mờ (Gradient) và Chữ "LET'S DISCOVER CRAFT" trên ảnh */
.story-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(74, 59, 50, 0.9), transparent);
    padding: 60px 20px 20px;
    text-align: center;
}

.story-image-overlay span {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* KHỐI NỘI DUNG (BÊN PHẢI) */
.story-content-wrapper {
    flex: 1;
}

.story-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #4A3B32;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.story-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2C3539;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Đường kẻ sóng SVG */
.story-wavy-divider {
    width: 100%;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6c6 0 6-4 12-4s6 4 12 4 6 4 12 4 6-4 12-4' fill='none' stroke='%2378A2B7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    margin-bottom: 25px;
    opacity: 0.8;
}

.story-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #2C3539;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.story-desc {
    color: #4A3B32;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Hai Nút Bấm song song */
.story-actions {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap; /* Ép không rớt dòng trên desktop */
}

.btn-solid-blue, .btn-outline-blue {
    flex: 1; /* Chia đều 50/50 chiều rộng */
    padding: 12px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
    border-radius: 6px !important;
}

.btn-solid-blue {
    background: #5A7B8C !important;
    color: #ffffff !important;
    border: 2px solid #5A7B8C !important;
}

.btn-solid-blue:hover {
    background: #4A6B7C !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(90, 123, 140, 0.3) !important;
}

.btn-outline-blue {
    background: transparent !important;
    color: #5A7B8C !important;
    border: 2px solid #5A7B8C !important;
}

.btn-outline-blue:hover {
    background: #5A7B8C !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* Bọc thép Mobile */
@media (max-width: 992px) {
    .story-container { flex-direction: column; text-align: center; }
    .story-image-wrapper { width: 100%; border-radius: 20px 60px 20px 20px; }
    .story-wavy-divider { background-position: center; }
}
@media (max-width: 576px) {
    .story-actions { flex-direction: column; }
    .btn-solid-blue, .btn-outline-blue { width: 100%; }
}

/* ==========================================================================
   6. CLIENT VOICES SECTION (VÁ LỖI CẤU TRÚC HOÀN CHỈNH 100%)
   ========================================================================== */
.vnc-voices-section {
    padding: 0 5% !important;
    margin-bottom: 80px !important;
    position: relative !important;
    z-index: 2 !important;
}

.vnc-voices-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.voices-title {
    font-size: 1.8rem !important;
    color: #2C3539 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.voices-subtitle {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 2.2rem !important;
    text-transform: none !important;
    font-weight: 400 !important;
    color: #4A3B32 !important;
}

/* Lưới 3 cột bọc thép */
.vnc-voices-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Khung thẻ Review - Bo góc và đổ bóng */
.voice-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(74, 59, 50, 0.08) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(74, 59, 50, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease !important;
    height: 100% !important;
}

.voice-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(74, 59, 50, 0.08) !important;
}

/* Khống chế ảnh sản phẩm không bị tràn */
.voice-img-wrapper {
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
}

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

/* Khu vực nội dung */
.voice-content {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.voice-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

/* Ép bo tròn Avatar (Chống khối vuông) */
.voice-avatar {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.voice-author {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.voice-author strong {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    color: #2C3539 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.voice-author span {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    color: #8A7B72 !important;
}

.voice-stars {
    color: #D4AF37 !important; /* Vàng Gold */
    font-size: 14px !important;
    letter-spacing: 1px !important;
}

.voice-quote {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4A3B32 !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
}

/* Footer Thẻ: Link MXH */
.voice-social {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(74, 59, 50, 0.08) !important;
}

.voice-social a {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    color: #5A7B8C !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.voice-social a:hover {
    color: #2C3539 !important;
}

/* Bọc thép Mobile */
@media (max-width: 992px) {
    .vnc-voices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    .vnc-voices-grid { grid-template-columns: 1fr !important; }
    .voices-title { font-size: 1.5rem !important; }
    .voices-subtitle { font-size: 1.8rem !important; }
}
/* ==========================================================================
   PREMIUM GRID SYSTEM (ĐÃ FIX TÁCH LƯỚI 3 CỘT VÀ 4 CỘT)
   ========================================================================== */

/* 1. Lưới 4 cột: Dành riêng cho Sản phẩm & Curated Finds */
.vnc-grid, 
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 2. Lưới 3 cột: Dành riêng cho khối Đánh giá (Client Voices) */
.vnc-voices-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Ép chiều cao các thẻ bên trong cân bằng tuyệt đối (Card Accordion) */
.vnc-grid > *, 
.vnc-voices-grid > *,
.product-grid > * {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Tablet Responsive: Tự động thu về 2 cột */
@media (max-width: 1024px) {
    .vnc-grid, 
    .vnc-voices-grid, 
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

/* Mobile Responsive: Tự động thu về 1 cột chống tràn viền */
@media (max-width: 768px) {
    .vnc-grid, 
    .vnc-voices-grid, 
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ==========================================================================
   7. STORE LOCATOR SECTION (BẢN TỐI GIẢN - IMAGE_93BA74)
   ========================================================================== */
.vnc-store-section {
    position: relative;
    padding: 80px 0;
    background: #F5F4F0; /* Màu nền xám phẳng sạch sẽ */
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.store-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1100px;
    width: 90%;
    gap: 60px;
}

/* Chữ BONATY HUBS xoay dọc */
.store-rotated-text {
    position: absolute;
    left: -80px;
    top: 50%;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateY(50%);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #4A3B32;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Khối Nội dung Cột Trái */
.store-content {
    flex: 1.2;
}

.store-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #4A3B32;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.store-title {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    color: #2C3539;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 24px;
    margin-top: 4px;
}

.store-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2C3539;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.store-desc {
    font-size: 0.95rem;
    color: #4A3B32;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 95%;
}

/* Khu vực 2 cột địa chỉ */
.store-locations {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.location-item {
    flex: 1;
    border-left: 1px solid rgba(74, 59, 50, 0.2);
    padding-left: 20px;
}

.location-item h5 {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #2C3539;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.location-item p {
    font-size: 0.85rem;
    color: #4A3B32;
    line-height: 1.6;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Nút TOUR */
.btn-store-tour {
    background: #5A7B8C !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 40px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    width: auto !important;
    display: inline-block !important;
    letter-spacing: 1px !important;
}

.btn-store-tour:hover {
    background: #4A6B7C !important;
    transform: translateY(-2px) !important;
}

/* Khối Bản đồ Cột Phải */
.store-map {
    flex: 0.8;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-dots {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
}

.map-dots span {
    width: 6px;
    height: 6px;
    background: rgba(90, 123, 140, 0.3);
    border-radius: 50%;
}
.map-dots span.active {
    width: 8px;
    height: 8px;
    background: #5A7B8C;
}

/* Mobile-First Bọc Thép */
@media (max-width: 992px) {
    .store-container { flex-direction: column; padding-left: 30px; gap: 40px; }
    .store-rotated-text { left: -10px; top: 0; transform: none; writing-mode: vertical-rl; }
    .store-locations { flex-direction: column; gap: 24px; }
    .location-item { border-left: none; border-top: 1px solid rgba(74, 59, 50, 0.2); padding-left: 0; padding-top: 16px; }
    .store-desc { max-width: 100%; }
    .map-dots { display: none; }
}

/* ==========================================================================
   KHÔI PHỤC: ẢNH SHOWROOM TRÀN VIỀN (STORE LOCATOR)
   ========================================================================== */
.store-side-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0.6; /* Làm mờ ảnh để không tranh giành sự chú ý với Bản đồ */
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.left-img { 
    left: -50px; /* Ép cắt lẹm vào viền trái */
}

.right-img { 
    right: -50px; /* Ép cắt lẹm vào viền phải */
}

.store-side-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: brightness(0.9); 
}

/* Tự động ẩn 2 ảnh này trên màn hình Tablet/Mobile để tiết kiệm không gian */
@media (max-width: 1024px) {
    .store-side-img { 
        display: none !important; 
    }
}

/* ==========================================================================
   8. ARTISAN'S CHOICE (BENTO COLLAGE CHUẨN IMAGE_94B15D)
   ========================================================================== */
.vnc-artisan-collage-section {
    position: relative;
    padding: 80px 5% 150px;
    background: #FDFBF7; /* Nền kem sáng */
    overflow: hidden;
}

.whale-deco { position: absolute; z-index: 1; pointer-events: none; }
.whale-deco.top-right { top: 10%; right: 15%; width: 150px; transform: rotate(10deg); opacity: 0.8; }
.whale-deco.bottom-left { bottom: 20px; left: 5%; width: 250px; transform: rotate(-15deg); z-index: 5; }

.artisan-header-collage { text-align: center; margin-bottom: 50px; position: relative; z-index: 2; }
.artisan-meta { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: #4A3B32; font-weight: 700; letter-spacing: 2px; }
.artisan-title { font-family: 'Inter', sans-serif; font-size: 2.2rem; color: #2C3539; font-weight: 800; margin: 5px 0; }
.artisan-subtitle { font-family: 'Playfair Display', serif; font-style: italic; font-size: 2.4rem; color: #4A3B32; margin-top: -10px; }

/* LƯỚI COLLAGE 4 CỘT BẤT ĐỐI XỨNG */
.collage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px; /* Chiều cao cơ sở */
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.collage-item { position: relative; display: flex; flex-direction: column; }
.collage-img-wrapper { width: 100%; height: 100%; overflow: hidden; box-shadow: 0 15px 35px rgba(74,59,50,0.1); }
.collage-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.collage-item:hover .collage-img-wrapper img { transform: scale(1.05); }

/* Ép tọa độ & Bo góc organic cho 6 sản phẩm */
.collage-item-1 { grid-column: 1; grid-row: 1; }
.collage-item-1 .collage-img-wrapper { border-radius: 40px 20px 20px 40px; }

.collage-item-2 { grid-column: 1; grid-row: 2; margin-top: 10px; }
.collage-item-2 .collage-img-wrapper { border-radius: 20px 20px 40px 20px; }

.collage-item-3 { grid-column: 2; grid-row: 1 / span 2; } /* Sản phẩm to ở giữa */
.collage-item-3 .collage-img-wrapper { border-radius: 30px; }

.collage-item-4 { grid-column: 3; grid-row: 1; margin-bottom: 20px; }
.collage-item-4 .collage-img-wrapper { border-radius: 20px 40px 20px 20px; }

.collage-item-5 { grid-column: 3; grid-row: 2; }
.collage-item-5 .collage-img-wrapper { border-radius: 20px; }

.collage-item-6 { grid-column: 4; grid-row: 1 / span 2; margin-top: 30px; } /* Sản phẩm dọc bên phải */
.collage-item-6 .collage-img-wrapper { border-radius: 20px 40px 40px 20px; }

/* Thẻ giá lơ lửng */
.collage-tag {
    background: #D5C2B1;
    border-radius: 8px;
    padding: 12px 10px;
    width: 110px;
    text-align: center;
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 15px rgba(74,59,50,0.1);
    z-index: 5;
}
.collage-tag::before {
    content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; background: #fff; border-radius: 50%;
}
.tag-string { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); z-index: -1; }
.tag-title { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #2C3539; font-weight: 700; margin: 8px 0; line-height: 1.2; }
.tag-price-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tag-price { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 800; color: #2C3539; }
.tag-price del { display: none; }
.tag-cart-btn { background: #5A7B8C; width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.tag-cart-btn:hover { background: #2C3539; }

/* Sóng biển cắt lớp dưới cùng (Giao với Footer) */
.ocean-wave-bottom {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C45.33,18.06,86.63,38.9,132.88,54.49,195.42,75.57,259.4,67.75,321.39,56.44Z' fill='%235A7B8C'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .collage-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .collage-item { grid-column: auto !important; grid-row: auto !important; margin: 0 0 50px 0 !important; }
    .whale-deco { display: none; }
}
@media (max-width: 576px) { .collage-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. SITE FOOTER (IMAGE_9516D9)
   ========================================================================== */
.vnc-site-footer {
    background-color: #5A7B8C; /* Trùng khớp mã màu sóng biển đại dương */
    color: #FDFBF7;
    padding: 60px 5% 20px;
    font-family: 'Inter', sans-serif;
    position: relative;
    margin-top: -2px; /* Chống đứt gãy nét render của trình duyệt giữa 2 khối */
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(253, 251, 247, 0.15); /* Đường gạch chia cắt thanh mảnh */
}

/* Cột 1: Logo */
.footer-logo-col {
    flex: 1;
    min-width: 150px;
}
.f-logo {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    line-height: 0.9;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    letter-spacing: 1px;
}
.f-logo-sub {
    font-style: italic;
    font-size: 2.5rem;
    margin-left: 20px;
    font-weight: 400;
}

/* Cột 2 & 3: Thông tin liên hệ */
.footer-social-col {
    flex: 1;
    min-width: 180px;
    padding-top: 10px;
}
.footer-info-col {
    flex: 1.5;
    min-width: 220px;
    padding-top: 10px;
}

.f-socials {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}
.f-socials a {
    color: #ffffff;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.f-socials a:hover { opacity: 1; }

.f-contact-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}
.f-contact-line svg {
    opacity: 0.8;
}

/* Cột 4: Lưới Danh mục */
.footer-nav-col {
    flex: 2;
    min-width: 300px;
    padding-top: 10px;
}
.f-nav-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.f-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.f-nav-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.85;
    transition: all 0.3s;
}
.f-nav-list a:hover { 
    opacity: 1; 
    text-decoration: underline; 
}

/* Thanh Bản quyền Dưới cùng */
.footer-bottom {
    max-width: 1200px;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    opacity: 0.7;
    letter-spacing: 0.5px;
}
.footer-bottom p { margin: 0; }

/* Bọc thép Mobile */
@media (max-width: 992px) {
    .footer-main { flex-direction: column; gap: 40px; }
    .footer-nav-col { width: 100%; }
    .f-nav-grid { justify-content: flex-start; gap: 60px; flex-wrap: wrap; }
}
@media (max-width: 576px) {
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* ==========================================================================
   SEAMLESS BACKGROUND UPGRADE (XUYÊN SUỐT, KHÔNG ĐỨT GÃY 100%)
   ========================================================================== */

/* Ép các khu vực về chế độ hiển thị xuyên suốt */
.vnc-curated-banner,
.vnc-store-section,
.vnc-artisan-collage-section {
    background-color: transparent !important;
    border: none !important;
}

/* Đảm bảo thẻ Daily Deals đè lên con sóng một cách hoàn hảo */
.vnc-daily-deals {
    margin-top: -60px !important;
    position: relative;
    z-index: 10;
    background: transparent !important;
}

.deals-wrapper {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(74, 59, 50, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Kén trắng "Our Story" xóa bỏ các margin/padding gây lệch viền sóng */
.vnc-story-section {
    background: transparent !important;
    margin-bottom: 0 !important;
    padding: 60px 5% !important;
}