/* ==========================================================================
   TECHCOMIN IMAGE FIT POLICY — 2026-10-13 (presentation only)
   Owner priority: PRESERVE FULL IMAGE CONTENT  >  visual fill  >  decorative crop.

   ROLE 1 PRODUCT (ảnh chủ sở hữu có in "Mã hàng / 1220 x 2800")  -> contain
   ROLE 2 POSTER / TECHNICAL (có chữ)                              -> contain
   ROLE 3 PRICE / SIZE / GUIDE (có số liệu)                        -> contain
   ROLE 4 EDITORIAL có chữ trong ảnh                               -> contain
   ROLE 5 ROOM / LIFESTYLE không chữ                               -> cover được phép
   ROLE 6 SURFACE / TEXTURE thuần                                  -> cover được phép

   Không dùng object-fit:fill (không kéo giãn), không zoom-in ảnh có chữ.
   File này được nạp CUỐI nên chỉ cần !important cho object-fit/transform.
   ========================================================================== */
:root{ --if-bg:#FAF8F3; --if-pad:6px; }

/* --- nền tảng: KHÔNG bao giờ kéo giãn ảnh (object-fit:fill) -------------------- */
body img{object-fit:cover}

/* --- lớp dùng chung theo brief ------------------------------------------------ */
.media-contain{width:100%;height:100%;object-fit:contain!important;object-position:center}
.media-cover{width:100%;height:100%;object-fit:cover!important;object-position:center}
.media-poster,.media-product,.media-editorial{
  width:100%;height:100%;object-fit:contain!important;object-position:center;
  background:var(--if-bg);transform:none!important}

/* --- ROLE 1: ảnh sản phẩm do chủ sở hữu cung cấp (có nhãn in trên tấm mẫu) ----- */
img[src*="/assets/img/owner/"]{
  object-fit:contain!important;object-position:center;background:var(--if-bg);
  transform:none!important}

/* --- ROLE 1b: ảnh sản phẩm TECHCOMIN dựng (có chữ / thông số) ----------------- */
img[src*="/assets/media/"]{
  object-fit:contain!important;object-position:center;background:var(--if-bg);
  transform:none!important}

/* --- ROLE 2/3: technical · spec · bảng giá · kích thước · hướng dẫn ----------- */
img[src*="/assets/v5/"],
img[src*="bang-gia"],img[src*="kich-thuoc"],img[src*="thong-so"],
img[src*="huong-dan"],img[src*="cach-tinh"],img[src*="tech-spec"]{
  object-fit:contain!important;object-position:center;background:var(--if-bg);
  transform:none!important}

/* --- ROLE 2b: poster có chữ TECHCOMIN (xác định bằng OCR trên ảnh đang render) - */
img[src*="tam-op-bamboo-charcoal-wood-c0010"],
img[src*="tam-op-bamboo-charcoal-wood-c0012"],
img[src*="tam-op-bamboo-charcoal-wood-c0013"],
img[src*="tam-op-bamboo-charcoal-wood-c0014"],
img[src*="tam-op-bamboo-charcoal-wood-c0015"],
img[src*="tam-op-bamboo-charcoal-wood-c0016"],
img[src*="tam-op-bamboo-charcoal-wood-c0017"],
img[src*="tam-op-bamboo-charcoal-wood-c0021"],
img[src*="tam-op-bamboo-charcoal-wood-c0026"],
img[src*="tam-op-bamboo-charcoal-wood-c0027"],
img[src*="tam-op-bamboo-charcoal-wood-c0028"],
img[src*="tam-op-bamboo-charcoal-wood-c0029"],
img[src*="tam-op-bamboo-charcoal-wood-c0030"],
img[src*="tam-op-bamboo-charcoal-wood-c0031"],
img[src*="tam-op-bamboo-charcoal-wood-c0043"],
img[src*="tam-op-bamboo-charcoal-wood-c0044"],
img[src*="tam-op-bamboo-charcoal-wood-c0045"],
img[src*="tam-op-bamboo-charcoal-wood-c0053"],
img[src*="tam-op-bamboo-charcoal-wood-c0082"],
img[src*="tam-op-bamboo-charcoal-wood-c0161"],
img[src*="tam-op-bamboo-charcoal-wood-c0171"],
img[src*="tam-op-bamboo-charcoal-wood-c0314"],
img[src*="tam-op-bamboo-charcoal-wood-c0487"],
img[src*="tam-op-decorative-panel-fabric-c0290"],
img[src*="tam-op-decorative-panel-fabric-c0416"],
img[src*="tam-op-decorative-panel-fabric-c0608"],
img[src*="tam-op-decorative-panel-fluted-c0135"],
img[src*="tam-op-decorative-panel-fluted-c0178"],
img[src*="tam-op-decorative-panel-fluted-c0194"],
img[src*="tam-op-decorative-panel-fluted-c0253"],
img[src*="tam-op-decorative-panel-fluted-c0625"],
img[src*="tam-op-decorative-panel-fluted-c0667"],
img[src*="tam-op-decorative-panel-marble-c0007"],
img[src*="tam-op-decorative-panel-marble-c0070"],
img[src*="tam-op-decorative-panel-marble-c0109"],
img[src*="tam-op-decorative-panel-marble-c0246"],
img[src*="tam-op-decorative-panel-marble-c0343"],
img[src*="tam-op-decorative-panel-metal-c0446"],
img[src*="tam-op-decorative-panel-ripple-c0047"],
img[src*="tam-op-decorative-panel-ripple-c0292"],
img[src*="tam-op-decorative-panel-ripple-c0427"],
img[src*="tam-op-decorative-panel-ripple-c0577"],
img[src*="tam-op-decorative-panel-stone-c0069"],
img[src*="tam-op-decorative-panel-stone-c0080"],
img[src*="tam-op-decorative-panel-stone-c0185"],
img[src*="tam-op-decorative-panel-stone-c0410"],
img[src*="tam-op-decorative-panel-stone-c0606"],
img[src*="tam-op-decorative-panel-unknown-c0011"],
img[src*="tam-op-decorative-panel-unknown-c0058"],
img[src*="tam-op-decorative-panel-unknown-c0060"],
img[src*="tam-op-decorative-panel-unknown-c0062"],
img[src*="tam-op-decorative-panel-unknown-c0068"],
img[src*="tam-op-decorative-panel-unknown-c0083"],
img[src*="tam-op-decorative-panel-unknown-c0097"],
img[src*="tam-op-decorative-panel-unknown-c0179"],
img[src*="tam-op-decorative-panel-unknown-c0440"],
img[src*="tam-op-decorative-panel-unknown-c0664"],
img[src*="tam-op-decorative-panel-wood-c0008"],
img[src*="tam-op-decorative-panel-wood-c0048"],
img[src*="tam-op-unknown-solid-c0208"],
img[src*="tam-op-unknown-solid-c0441"],
img[src*="tam-op-unknown-solid-c0607"],
img[src*="tam-op-unknown-wood-c0371"]{
  object-fit:contain!important;object-position:center;background:var(--if-bg);
  transform:none!important}

/* --- logo / brand: không bao giờ crop ----------------------------------------- */
img[src*="/assets/brand/"]{object-fit:contain!important;object-position:center}

/* --- khung ảnh: nền trung tính khi contain tạo khoảng trống -------------------- */
.pc-thumb,.thumb,.ui21-thumb,.cp3-thumb,.pcard .thumb,.d5-thumb,.sc-thumb,
.cat-hero-media,.cf-media,.pdp-gal,.pdp-gal figure,.gcard,.owner-gallery picture,
.cat-table td .cat-thumb{background:var(--if-bg)}

/* --- PDP: ảnh chính + gallery phải thấy đủ tấm mẫu và thông số in trên ảnh ----- */
.pdp-gal img,.pdp-gal picture img,.pdp-gal .gcard img{
  object-fit:contain!important;background:var(--if-bg);transform:none!important}

/* --- thumbnail 62px trong bảng giá ------------------------------------------- */
.cat-table td .cat-thumb,.cat-table td.c- img,.cp3-thumbchip img{
  object-fit:contain!important;background:var(--if-bg)}

/* --- khung 16:10 cho card có ảnh vuông: dùng 1:1 để ảnh vẫn phủ ~100%% khung --- */
.article-card .pc-thumb img{aspect-ratio:1/1;object-fit:contain!important;background:var(--if-bg)}
.cat-feature .cf-media img{object-fit:contain!important;background:var(--if-bg)}

/* --- không zoom-in khi hover trên ảnh có chữ ---------------------------------- */
img[src*="/assets/img/owner/"],img[src*="/assets/media/"],
img[src*="/assets/v5/"],img[src*="bang-gia"],img[src*="kich-thuoc"]{transform:none!important}

/* --- ảnh phòng/bề mặt không chữ: giữ cover để khung vẫn đầy ------------------- */
/* --- mobile: poster được phép cao hơn, khung 1:1 để ảnh vuông phủ đủ 100%% ----- */
@media (max-width:900px){
  .cat-hero-media{aspect-ratio:1/1;max-height:340px}
}

@media all{
  img[src*="/assets/semantic/"],img[src*="/assets/cp3/"]{object-position:center}
}
