/* view.css */
body { background-color: #f0f2f5; }

/* --- SỬA LẠI PHẦN LIGHTBOX CHO SWIPER --- */

#gallery-lightbox {
    /* Màu nền đã được xử lý bởi class Tailwind (bg-black/95) trong HTML */
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}

#gallery-lightbox.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

#gallery-lightbox:not(.hidden) {
    display: block !important; /* Swiper cần display block để render đúng */
    opacity: 1;
    pointer-events: auto;
}

/* Cấu hình Swiper Container */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    overflow: hidden;
    /* Căn giữa ảnh trong slide */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Cấu hình Zoom (quan trọng cho module Zoom của Swiper) */
.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-zoom-container > img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Tùy chỉnh nút Next/Prev */
.swiper-button-next, .swiper-button-prev {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #ffffff !important;
}

/* Tùy chỉnh các chấm phân trang (Pagination) */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: #DA251D !important; /* Màu đỏ thương hiệu */
    opacity: 1;
}

/* --- CÁC PHẦN DƯỚI GIỮ NGUYÊN --- */

/* Hiệu ứng con dấu Verified */
.verified-seal {
    border: 3px solid #DA251D; color: #DA251D; font-weight: bold; text-transform: uppercase;
    padding: 5px 15px; border-radius: 8px; display: inline-block;
    transform: rotate(-5deg); letter-spacing: 1px;
    box-shadow: 0 0 0 2px #fff inset;
    background: rgba(218, 37, 29, 0.05);
}

/* Các hiệu ứng loading chung */
.gemini-loading::after { content: ' .'; animation: dots 1s steps(5, end) infinite; }
@keyframes dots {
  0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  40% { color: #1967d2; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  60% { text-shadow: .25em 0 0 #1967d2, .5em 0 0 rgba(0,0,0,0); }
  80%, 100% { text-shadow: .25em 0 0 #1967d2, .5em 0 0 #1967d2; }
}

/* Helper classes */
.hidden { display: none; }
.touch-none { touch-action: none; }

/* Chuẩn hóa hiển thị câu chuyện sản phẩm */
#trace-process-notes::first-letter {
    font-size: 1.6em;
    font-weight: 700;
    color: #003366; /* brand-primary */
}
/* Clamp 10 dòng cho "Câu chuyện sản phẩm" */
.line-clamp-15{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 15;
  overflow: hidden;
}