/* ===================================================================
   Nam Hà Highfarm — Trang con: page hero, danh mục, chi tiết bài,
   trang nội dung, liên hệ, tìm kiếm, thư viện, 404

   Màu và chữ lấy hết từ tokens.css nên file này đi theo bộ nhận diện mà
   không phải sửa từng giá trị. Ngoại lệ duy nhất là các lớp phủ rgba()
   dựng từ màu chủ đạo — CSS thuần không nội suy alpha vào biến hex được.

   TÊN CLASS Ở ĐÂY LÀ HỢP ĐỒNG với các hàm sinh markup trong Frontend/*.aspx.cs
   và App_Code/Help/Frontend*Card.cs. Đổi selector mà không mở lại hàm sinh
   markup thì style mất im lặng: không lỗi, không cảnh báo, chỉ là thẻ trần.
   Kiểm bằng document.querySelectorAll('<selector>').length trên trang thật.
   =================================================================== */

/* ================================================== PAGE HERO ===== */
.page-hero {
    position: relative;
    padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
    background: var(--c-primary-dark) center / cover no-repeat;
    color: var(--c-white);
    overflow: hidden;
}
.page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(11, 50, 32, .92) 0%, rgba(11, 50, 32, .55) 100%);
}
.page-hero-plain .page-hero-overlay {
    background: radial-gradient(120% 100% at 12% 0%, rgba(47, 125, 76, .95) 0%, rgba(11, 50, 32, 1) 72%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: 1.12;
    color: var(--c-white);
    margin: 0 0 16px;
}
.page-hero-title::after {
    content: "";
    display: block;
    width: 56px; height: var(--rule);
    background: var(--c-accent);
    margin-top: 18px;
}
/* Mô tả danh mục: nằm trong page-hero thì chữ trắng, nằm ở thân trang thì chữ tối */
.page-intro {
    max-width: var(--container-narrow);
    margin: 0 0 var(--sp-block);
    color: var(--c-body);
    font-size: var(--fs-lead);
}
.page-hero .page-intro { margin: 18px 0 0; color: rgba(255, 255, 255, .78); }

/* Header của site này là sticky và CHIẾM CHỖ trong dòng chảy (xem layout.css),
   nên page hero không phải chừa chỗ cho nó nữa. */

/* ================================================== NỘI DUNG ====== */
.inner-section { padding: var(--sp-section) 0; }

/* Thân trang nội dung (module PAGE) — HTML soạn trong Admin */
.page-content { font-size: 1.0625rem; color: var(--c-body); }
.page-content > :first-child { margin-top: 0; }
.page-content .lead { font-size: var(--fs-lead); color: var(--c-primary); }
.page-content h2 { font-size: 1.5rem; margin-top: 1.7em; }
.page-content h3 { font-size: 1.25rem; margin-top: 1.5em; }
.page-content img { border-radius: var(--radius); margin: 0; }
.page-content ul, .page-content ol { padding-left: 1.35em; }
.page-content li { margin-bottom: .5em; }
.page-content figure {
    margin: 1.6em 0;
    max-width: 340px;
}
.page-content figure img { width: 100%; border: 1px solid var(--c-line); }
.page-content figcaption {
    margin-top: 10px;
    padding-left: 14px;
    border-left: var(--rule) solid var(--c-accent);
    font-size: var(--fs-small);
    color: var(--c-muted);
}
.page-content blockquote {
    margin: 1.5em 0;
    padding: 6px 0 6px 22px;
    border-left: var(--rule) solid var(--c-accent);
    color: var(--c-primary);
    font-size: var(--fs-lead);
}
.page-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.page-content th, .page-content td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; }
.page-content th { background: var(--c-bg-soft); color: var(--c-primary); }

/* ================================================== CHI TIẾT BÀI == */
.post-article { max-width: 100%; }
.post-article-title {font-size: 38px;margin-bottom: 18px;}
.post-article-meta {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    padding-bottom: 20px; margin-bottom: 26px;
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-small);
    color: var(--c-muted);
}
.post-article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.post-article-meta i { color: var(--c-accent); }
.post-article-content { font-size: 1.0625rem; color: var(--c-body); }
.post-article-content h2 { font-size: 1.5rem; margin-top: 1.6em; }
.post-article-content h3 { font-size: 1.25rem; margin-top: 1.5em; }
.post-article-content img { margin: 1.4em 0; border-radius: var(--radius); }
.post-article-content blockquote {
    margin: 1.5em 0;
    padding: 6px 0 6px 22px;
    border-left: var(--rule) solid var(--c-accent);
    color: var(--c-primary);
    font-size: var(--fs-lead);
}
.post-article-content ul, .post-article-content ol { padding-left: 1.35em; }
.post-article-content li { margin-bottom: .5em; }
.post-article-content > :first-child { margin-top: 0; }
.post-article-content .lead {
    font-size: var(--fs-lead);
    color: var(--c-primary);
    margin-bottom: 1.4em;
}

/* Ghi chú "thông tin chung, không phải tư vấn pháp lý" cuối mỗi bài.
   Dùng chung cho trang bài viết và trang nội dung (module PAGE). */
.post-article-content .article-note,
.page-content .article-note {
    margin-top: 2.2em;
    padding: 18px 20px;
    background: var(--c-bg-soft);
    border-left: var(--rule) solid var(--c-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--fs-small);
    color: var(--c-muted);
}
.post-article-content .article-note strong,
.page-content .article-note strong { color: var(--c-primary); }

.related-posts { padding: var(--sp-section) 0; }

/* ================================================== LIÊN HỆ ======= */
.contact-info-title {font-size: 32px;margin-bottom: 14px;}
.contact-info-desc { color: var(--c-body); margin-bottom: 26px; }

.contact-info-list { list-style: none; margin: 0 0 30px; padding: 0; }
.contact-info-list li {display: flex;gap: 16px;padding: 10px 0;border-bottom: 1px solid var(--c-line-soft);}
.contact-info-list li:last-child { border-bottom: 0; }
.ci-ic {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent-soft);
    color: var(--c-accent-dark);
    border-radius: var(--radius);
}
.contact-info-list small{display: block;font-weight: 400;}
.contact-info-list strong {display: block;color: var(--c-primary);font-size: 16px;/* text-transform: uppercase; *//* letter-spacing: .08em; */margin-bottom: 3px;}
.contact-info-list a {color: var(--c-body);font-weight: 600;font-size: 16px;}
.contact-info-list a:hover { color: var(--c-accent-dark); }

/* .cq-ic / .cq-body GIỮ LẠI dù khối "liên hệ nhanh" đã gỡ: dải mời xem bản đồ do
   Contact.aspx.cs dựng (nhánh chưa có mã nhúng Google Maps) vẫn dùng đúng hai class này.
   Kiểm trước khi xoá: grep -rn "cq-ic\|cq-body" Frontend/ App_Code/ */
.cq-ic {
    flex: 0 0 42px; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary); color: var(--c-white);
    border-radius: 50%;
}
.cq-body strong { display: block; color: var(--c-primary); }
.cq-body span { font-size: var(--fs-small); color: var(--c-muted); }

.contact-socials { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact-socials-label {font-size: 14px;font-weight: 700;/* letter-spacing: .1em; *//* text-transform: uppercase; */color: var(--c-primary);}
.socials{display: flex;gap: 13px;}
.contact-socials a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #155f3b66;
    border-radius: 7px;
    color: var(--c-primary);
}
.contact-socials a:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.contact-form-card {
    padding: 32px;
    background: var(--c-white);
    /* border: 1px solid var(--c-line); */
    /* border-top: var(--rule) solid var(--c-accent); */
    border-radius: var(--radius);
    /* box-shadow: var(--shadow-sm); */
}
.contact-form-heading { margin: 0 0 8px; font-size: 1.5rem; }
.contact-form-sub { margin: 0 0 24px; font-size: var(--fs-small); color: var(--c-muted); }

.contact-map {margin-top: 0;border-radius: var(--radius);overflow: hidden;border: 1px solid var(--c-line);}
.contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ================================================== TÌM KIẾM ====== */
.search-box {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 46px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-block);
}
.search-box > i:first-child { position: absolute; left: 18px; color: var(--c-accent); }
.search-input { flex: 1; border: 0; padding: 8px 0; box-shadow: none; }
.search-input:focus { box-shadow: none; }
.search-submit { flex: 0 0 auto; }
.search-summary { margin-bottom: 22px; color: var(--c-muted); font-size: var(--fs-small); }

/* ================================================== THƯ VIỆN ====== */
.media-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-block); }
.media-tab {
    padding: 9px 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    color: var(--c-primary);
    font-size: var(--fs-small);
    font-weight: 600;
}
.media-tab.is-active, .media-tab:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.media-item { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--c-line); }
.media-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.media-item:hover img { transform: scale(1.05); }

/* --- Album (MediaGallery.aspx dùng tiền tố .album-, không phải .media-) --- */
.album-tabs {
    display: flex; flex-wrap: wrap; gap: 10px;
    list-style: none; margin: 0 0 var(--sp-block); padding: 0;
    border: 0;
}
.album-tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 8px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-primary);
    font-size: var(--fs-small);
    font-weight: 600;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.album-tab:hover { border-color: var(--c-accent); }
.album-tab.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.album-tab-thumb {
    flex: 0 0 34px; width: 34px; height: 34px;
    overflow: hidden; border-radius: 50%;
}
.album-tab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.album-desc { margin-bottom: 20px; color: var(--c-muted); max-width: 720px; }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.album-photo {
    position: relative; display: block; overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}
.album-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.album-photo:hover img { transform: scale(1.05); }
.album-photo-zoom {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(14, 36, 82, .45);
    color: var(--c-white);
    opacity: 0; transition: opacity var(--t);
}
.album-photo:hover .album-photo-zoom { opacity: 1; }
.album-grid .album-empty { grid-column: 1 / -1; }

/* ================================================== 404 =========== */
.notfound { text-align: center; padding: clamp(60px, 10vw, 120px) 0; }
.notfound-code { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); line-height: 1; color: var(--c-primary-mist); margin: 0; }
.notfound h1 { margin-top: -.2em; }
.notfound p { max-width: 520px; margin: 0 auto 28px; color: var(--c-muted); }


/* ================================================== SẢN PHẨM ====== */
/* Dùng biến trong tokens.css — không viết thẳng mã màu ở đây. */

/* --- Lưới + thẻ sản phẩm (FrontendProductCard.RenderCard) --- */
.product-grid { margin-top: 8px; }

/* --- Băng "mặt hàng cùng nhóm" ở cuối trang chi tiết (ProductDetail.RenderRelated) ---
   Cùng bộ thẻ .product-card với trang danh sách, chỉ khác khung: lưới Bootstrap đổi thành
   .swiper-wrapper > .swiper-slide. Khởi tạo Swiper nằm trong Frontend/ProductDetail.aspx —
   home.js (bộ khởi tạo .js-swiper đọc data-*) CHỈ được trang chủ nạp, đừng trông vào nó ở đây. */
.related-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: var(--sp-block);
}
/* .section-heading tự nó đã có margin-bottom; dồn khoảng cách đó lên .related-head để
   tiêu đề và cụm nút nằm đúng trên một hàng. */
.related-head .section-heading { margin-bottom: 0; }

.related-nav { display: flex; gap: 10px; }
/* Nút Swiper mặc định là mũi tên to định vị tuyệt đối giữa slider — ở đây nút nằm trên hàng
   tiêu đề nên phải gỡ hết định vị đó. Hình thức nút lấy từ .swiper-button-* ở components.css
   (nền trắng, viền xám) vì section này nền sáng. */
.related-btn {
    position: static;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 10px;
}
.related-btn::after { font-size: 15px; font-weight: 700; }
.related-btn.swiper-button-disabled { opacity: .32; cursor: default; }

.related-rail { overflow: hidden; }
/* .product-card cao 100%: slide phải cao bằng nhau thì thẻ mới kéo dài theo, nếu không
   thẻ ít chữ sẽ thấp hơn và hàng "Xem chi tiết" so le. */
.related-rail .swiper-slide { height: auto; }

/* Khoảng cách lưới trên di động: g-4 (1.5rem) quá rộng khi lưới còn 2 cột — hai thẻ bị bóp
   hẹp lại chỉ để chừa một rãnh 24px ở giữa. Thu về đúng mức của g-2 (0.5rem).
   Đặt bằng biến chứ không sửa class trong markup: chuỗi "row g-4 product-grid" do
   FrontendProductCard.RenderGrid (App_Code/Help/) sinh ra — đó là mã NỀN TẢNG dùng chung
   cho mọi site, còn đây là quyết định riêng của site này. Hai giá trị dưới đây chính là
   những gì Bootstrap gán cho .g-2 / .g-4, đổi thang gutter của Bootstrap thì phải rà lại.
   Áp cho cả lưới danh sách lẫn lưới "sản phẩm liên quan" ở trang chi tiết — cùng một
   component, để lệch nhau thì hai trang trông khác nhau mà không ai cố ý. */
@media (max-width: 767.98px) {
    .product-grid { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
}

.product-card {
    height: 100%;
    display: flex; flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--c-line-soft); }

.product-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--c-bg-soft);
    overflow: hidden;
    padding: 20px;
}
.product-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity var(--t), transform .6s var(--ease);
}
.product-card:hover .product-card-img { transform: scale(1.04); }
/* Ảnh thứ hai chỉ tồn tại khi admin nhập HoverImageUrl. */
.product-card-img-hover { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .product-card-img-hover { opacity: 1; }

.product-card-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-line); font-size: 2.5rem;
}

.product-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.product-card-brand { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.product-card-title { font-size: 1.02rem; line-height: 1.4; margin: 0; }
.product-card-title a { color: var(--c-ink); }
.product-card-title a:hover { color: var(--c-primary); }
.product-card-desc {font-size: 14px;color: var(--c-muted);margin: 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom: 10px;line-height: 20px;}
.product-card-link { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--c-primary); }
.product-card-link i { transition: transform var(--t); }
.product-card-link:hover i { transform: translateX(3px); }

/* --- Giá --- */
.product-price {display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px;margin: 2px 0 4px;display: none;}
.product-price-now { font-size: 1.12rem; font-weight: 700; color: var(--c-primary); }
.product-price-prefix, .product-price-unit { font-size: .85rem; color: var(--c-muted); }
.product-price-old { font-size: .9rem; color: var(--c-muted); }
.product-price-contact { font-size: 1rem; font-weight: 600; color: var(--c-accent-dark); }
.product-price-note { flex-basis: 100%; font-size: .8rem; color: var(--c-muted); }

/* --- Nhãn --- */
.product-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.product-badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 3px 8px; border-radius: var(--radius-pill);
    background: var(--c-primary); color: var(--c-white);
}
.product-badge-sale { background: var(--c-danger); }
.product-badge-new { background: var(--c-success); }
.product-badge-best { background: var(--c-accent); color: var(--c-primary-dark); }
.product-badge-out { background: var(--c-muted); }

/* --- Dải danh mục con --- */
.product-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.product-subnav-item {
    font-size: .88rem; padding: 6px 14px;
    border: 1px solid var(--c-line); border-radius: var(--radius-pill);
    color: var(--c-body); background: var(--c-bg);
}
.product-subnav-item:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* --- Trang chi tiết --- */
.page-hero-compact { padding-block: 24px; }

.product-gallery-main {
    border: 1px solid var(--c-line); border-radius: var(--radius);
    overflow: hidden; background: var(--c-bg-soft);
}
.product-gallery-main img {width: 100%;aspect-ratio: 4 / 3;object-fit: contain;display: block;}
.product-gallery-empty {
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
    background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius);
    color: var(--c-line); font-size: 3rem;
}
.product-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.product-gallery-thumb {
    width: 72px; height: 72px; border: 1px solid var(--c-line); border-radius: var(--radius);
    overflow: hidden; display: block;
}
.product-gallery-thumb.is-active { border-color: var(--c-primary); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-summary { position: relative; }
.product-summary .product-badges { position: static; flex-direction: row; margin-bottom: 10px; }
.product-summary-brand { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.product-summary-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 4px 0 12px; }
.product-summary-desc { color: var(--c-body); margin-bottom: 12px; }

.product-meta { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.product-meta li { font-size: .9rem; }
.product-meta-label { color: var(--c-muted); margin-right: 6px; }
.product-meta-value { font-weight: 600; color: var(--c-ink); }

.product-highlights { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.product-highlights li { font-size: .93rem; }
.product-highlights i { color: var(--c-accent); margin-right: 6px; }

/* Nút mở form báo giá ở cột tóm tắt. Form thật nằm trong modal ở cuối trang. */
.product-quote-open { margin-top: 6px; align-self: start; }

/* Form báo giá nằm TRONG modal nên bỏ khung nền/viền riêng — modal-content đã là khung rồi.
   Trước đây form hiện thẳng ở cột tóm tắt nên mới cần nền xám + viền. */
.product-quote { display: grid; gap: 10px; }
.product-quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-quote .cf-input { width: 100%; }

/* --- Modal báo giá --- */
.product-quote-modal .modal-content { border: 0; border-radius: var(--radius-lg); }
.product-quote-modal .modal-header {
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-line);
}
.product-quote-modal .modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-primary);
}
.product-quote-modal .modal-body { padding: 22px; }
.product-quote-modal .booking-submit { justify-self: start; }

.product-section { margin-top: 40px; }
.product-section-title { font-size: 1.25rem; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); }

.product-specs { width: 100%; border-collapse: collapse; }
.product-specs th, .product-specs td { padding: 10px 12px; border-bottom: 1px solid var(--c-line-soft); font-size: .93rem; text-align: left; vertical-align: top; }
.product-specs th { width: 38%; color: var(--c-muted); font-weight: 500; }
.product-specs td { color: var(--c-ink); }
.product-specs-group th { background: var(--c-bg-soft); color: var(--c-ink); font-weight: 700; width: auto; }

/* Tài liệu đính kèm — xem App_Code/Security/AdminProductService.DetectFileKind:
   .is-image mở lightbox và có ảnh xem trước, .is-file mở tab mới và có icon theo đuôi file. */
.product-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.product-docs a { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-primary); font-weight: 600; transition: border-color .2s, box-shadow .2s; }
.product-docs a:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.product-doc-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); color: var(--c-primary); font-size: 1.4rem; }
.product-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-doc-name { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.45; }
.product-doc-size { display: block; color: var(--c-muted); font-weight: 400; font-size: .82rem; }

@media (max-width: 575.98px) {
    .product-quote-row { grid-template-columns: 1fr; }
    .product-card-body { padding: 12px; }
}

/* --- Biến thể + nhãn ở trang chi tiết --- */
.product-variants { margin: 14px 0; }
.product-variants-label { font-size: .85rem; color: var(--c-muted); margin-bottom: 6px; }
.product-variants-list { display: flex; flex-wrap: wrap; gap: 8px; }
.product-variant {
    font-size: .9rem; padding: 8px 14px; cursor: pointer;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-body);
}
.product-variant:hover { border-color: var(--c-primary); }
.product-variant.is-active { border-color: var(--c-primary); background: var(--c-primary-mist); color: var(--c-primary); font-weight: 600; }
.product-variant-out { color: var(--c-danger); }

.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.product-tag {
    font-size: .78rem; font-weight: 700; padding: 3px 10px;
    border-radius: var(--radius-pill); background: var(--c-primary); color: var(--c-white);
}

/* --- Chi tiết media (module MEDIA) --- */
.media-detail-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px; }
.media-detail-figure { margin: 0 0 18px; }
.media-detail-figure img {
    width: 100%; max-height: 70vh; object-fit: contain; display: block;
    background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.media-detail-figure figcaption { margin-top: 8px; font-size: .9rem; color: var(--c-muted); text-align: center; }
.media-detail-frame {
    position: relative; aspect-ratio: 16 / 9; margin-bottom: 18px;
    border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: #000;
}
.media-detail-frame iframe, .media-detail-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-detail-caption { color: var(--c-muted); }
.media-detail-desc { margin-top: 12px; }

/* ================================================== BỘ LỌC SẢN PHẨM
   Ba trục lọc của trang danh sách (hợp đồng mục 2.2): nhóm · hình thức chế biến ·
   mùa vụ. Dựng bằng LIÊN KẾT chứ không phải <form> — cả trang đã nằm trong
   <form runat="server"> của MasterPage nên không lồng form thứ hai được.
   ================================================================= */
.pl-filter {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--radius-lg);
    padding: 18px 22px 8px;
    margin-bottom: 30px;
}

.pl-filter-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--c-line-soft);
}
.pl-filter-row:last-of-type { border-bottom: 0; }

.pl-filter-label {
    flex: 0 0 150px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-ink);
}

.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pl-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-body);
    font-size: var(--fs-small);
    line-height: 1.5;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.pl-chip:hover { border-color: var(--c-primary-soft); color: var(--c-primary); }
.pl-chip.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-white);
}

.pl-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-danger);
}
.pl-filter-clear:hover { text-decoration: underline; }

.pl-count {
    margin: 0 0 18px;
    font-size: var(--fs-small);
    color: var(--c-muted);
}

.empty-note {
    padding: 28px;
    background: var(--c-bg-soft);
    border-radius: var(--radius-lg);
    color: var(--c-muted);
    text-align: center;
}

@media (max-width: 767.98px) {
    /* align-items: stretch PHẢI khai lại: luật gốc đặt `baseline`, mà trong flex container
       hướng CỘT thì baseline căn theo trục NGANG và hành xử như flex-start — .pl-chips khi đó
       rộng bằng max-content (đo được 624px trong hàng 297px), tràn khỏi .pl-filter và làm CẢ
       TRANG cuộn ngang, còn overflow-x bên dưới thì không bao giờ có dịp chạy. */
    .pl-filter-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .pl-filter-label { flex: none; }

    /* Mỗi trục lọc thành MỘT hàng kéo ngang thay vì xuống dòng nhiều dòng. Trục mùa vụ có
       13 chip (Tất cả + 12 tháng): để nó xuống dòng thì riêng bộ lọc đã chiếm gần trọn màn
       hình điện thoại, phải cuộn hết bộ lọc mới nhìn thấy sản phẩm đầu tiên. */
    .pl-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
        /* Chừa chỗ cho thanh cuộn rồi kéo ngược lại đúng bấy nhiêu: không chừa thì thanh
           cuộn đè lên chip, chừa mà không kéo lại thì mỗi hàng lọc cao thêm 8px. */
        padding-bottom: 8px;
        margin-bottom: -8px;
        scrollbar-width: thin;
        scrollbar-color: var(--c-line) transparent;
    }
    /* Trong container flex-wrap:nowrap, item mặc định CO LẠI (flex-shrink: 1) — chip sẽ bị
       bóp ngang và chữ trong chip xuống dòng, trông như hỏng chứ không như một hàng kéo
       được. Phải khoá cả co lẫn ngắt dòng. */
    .pl-chips .pl-chip {flex: 0 0 auto;white-space: nowrap;font-size: 13px;padding: 4px 13px;}

    /* Thanh cuộn mảnh: đủ để báo "còn nữa bên phải", không chiếm chỗ của chip. */
    .pl-chips::-webkit-scrollbar { height: 4px; }
    .pl-chips::-webkit-scrollbar-track { background: transparent; }
    .pl-chips::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: var(--radius-pill); }
}

/* ================================================== MÙA VỤ Ở TRANG SẢN PHẨM
   Cùng bộ dữ liệu với bảng mùa vụ ở trang chủ (ProductSeasonMonths), nhưng chỉ
   một dòng nên vẽ gọn hơn: 12 ô vuông thay vì thanh ngang có tên mặt hàng.
   ================================================================= */
.pd-season {margin-top: 4px;overflow-x: auto;}

.pd-season-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px 0;
    table-layout: fixed;
    min-width: 600px;
}
.pd-season-table th {
    padding: 0 0 8px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-muted);
    text-align: center;
}
.pd-season-table td {
    height: 15px;
    border-radius: var(--radius);
    background: var(--c-line-soft);
}
.pd-season-table td.is-supply { background: var(--c-line); }
.pd-season-table td.is-peak { background: var(--c-accent); }

.pd-season-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 14px;
    font-size: var(--fs-small);
    color: var(--c-body);
}
.pd-season-legend span { display: inline-flex; align-items: center; gap: 9px; }
.pd-key { width: 34px; height: 12px; border-radius: var(--radius-pill); display: inline-block; }
.pd-key.is-supply { background: var(--c-line); }
.pd-key.is-peak { background: var(--c-accent); }

/* Dòng "Yêu cầu báo giá cho: <tên mặt hàng>" — hợp đồng mục 2.3 đòi yêu cầu tự
   gắn kèm mặt hàng đang xem, nên phải NHÌN THẤY được, không chỉ nằm ở input ẩn. */
.product-quote-for {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--c-primary-mist);
    border-left: 3px solid var(--c-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--fs-small);
    color: var(--c-primary);
    font-weight: 600;
}

/* Chỉ hiện với trình đọc màn hình — ô màu của bảng mùa vụ cần chữ để đọc được. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}