/* ============================================================================
   ts-shop-chitiet.css — CSS RIÊNG CHO NHÓM "CHI TIẾT SẢN PHẨM"
   File này CHỈ do nhóm Chi tiết sản phẩm sửa (Views/SanPham/ChiTiet.cshtml, có thể
   kèm Views/Shared/Components/... nếu trang chi tiết cần).

   Luật: chỉ thêm những gì `ts-shop.css` KHÔNG có. Ưu tiên tái dùng class có sẵn
   (.product-grid, .card-*, .vf360, .spec-row, .section, .khung, .btn…).
   Mọi lớp thêm mới phải đặt tiền tố riêng (gợi ý: `ct-`) để không đụng trang khác.
   ========================================================================== */


/* ============================================================================
   1) CSS KHUNG TƯƠNG TÁC — KHÔNG CÒN PHẢI CHÉP LẠI
   ----------------------------------------------------------------------------
   Ngày 2026-10-18 điều phối viên đã thêm 2 thẻ <link> vào `_LayoutShop.cshtml`:
       ~/css/vf-360.css   (khung xoay 360° `.vf360[data-vf360]`)
       ~/css/ts-3d.css    (khung model 3D `.ts3d-*`)
   nên file này KHÔNG còn giữ bản sao của 2 file đó nữa — sửa gốc 1 nơi là mọi trang theo.
   ========================================================================== */


/* ============================================================================
   2) ĐƯỜNG DẪN + BỐ CỤC 2 CỘT CỦA TRANG CHI TIẾT
   ========================================================================== */
.ct-crumbs { margin-bottom: 1.75rem; }
.ct-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; color: var(--ink-3); }
.ct-crumbs li { display: flex; align-items: center; gap: .4rem; }
.ct-crumbs li + li::before { content: "›"; opacity: .65; }
.ct-crumbs a { font-weight: 600; }
.ct-crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

.ct-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, .75rem + 2.5vw, 3rem);
  align-items: start;
}
/* `grid-template-columns: minmax(0, 1fr)` là BẮT BUỘC, không chỉ để cho đẹp:
   .gallery-track dùng `overflow-x: auto` nhưng max-content của nó vẫn bằng
   "24 khung × 168px ≈ 4308px" — cột grid ẩn (`auto`) sẽ nở theo max-content đó,
   kéo .vf360 cao 3231px và tràn khỏi cột. minmax(0,1fr) khoá cột đúng bề rộng
   khung chứa, còn dải ảnh tự cuộn ngang bên trong. */
.ct-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; min-width: 0; }
.ct-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; align-content: start; min-width: 0; }

/* Khung bọc viewer (giữ .card-badge của v5 nằm đúng góc khung) */
.ct-frame { position: relative; }
.ct-frame > .card-badge { pointer-events: none; z-index: 3; }
/* Đồng bộ viền/bo góc của 2 khung xem với bảng màu v5 */
.ct-frame .vf360, .ct-frame .ts3d-wrap { border-color: var(--line); border-radius: var(--r-lg); }


/* ============================================================================
   3) CỘT THÔNG TIN: TÊN, GIÁ, TỒN KHO, NÚT THÊM VÀO GIỎ, MÔ TẢ
   ========================================================================== */
.ct-cat { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ct-cat a { font-weight: 700; }
.ct-title { font-size: var(--t-h2); margin: .15em 0 .1em; }
.ct-sub { margin: 0; color: var(--ink-3); font-size: var(--t-lead); }
.ct-price { display: flex; align-items: baseline; gap: .6rem; margin: .3rem 0 .1rem; }
.ct-price .price-new { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem); }
.ct-stock { margin: 0; font-weight: 600; }
.ct-stock.is-ok { color: #1a7f37; }
.ct-stock.is-out { color: #b00020; }

/* Form thêm vào giỏ: GIỮ NGUYÊN action/name/min/max của bản cũ, chỉ đổi bố cục */
.ct-buy {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
  margin-top: .35rem; padding: 1rem 1.1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ct-qty { display: grid; gap: .3rem; }
.ct-qty label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ct-qty input {
  width: 6.5rem; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: .68rem .8rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-qty input:focus { outline: none; background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px var(--glow); }
.ct-add { flex: 1 1 11rem; }
.ct-hotline { margin: 0; font-size: .9rem; color: var(--ink-3); }
.ct-hotline a { font-weight: 700; }

.ct-meta { display: grid; gap: .4rem; font-size: .93rem; color: var(--ink-2); }
.ct-meta li { display: flex; gap: .5rem; align-items: baseline; }
.ct-meta li::before { content: "✓"; color: var(--blue); font-weight: 800; }

.ct-desc { margin-top: .25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ct-desc h2 { font-size: var(--t-h3); margin-bottom: .35rem; }
.ct-desc p { margin: 0; color: var(--ink-2); }


/* ============================================================================
   4) DẢI ẢNH CHI TIẾT (dùng lại .gallery của v5, thu nhỏ cho vừa cột ảnh)
   ========================================================================== */
.ct-shots-h {
  margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.ct-media .gallery-track { gap: .75rem; padding-bottom: .55rem; }
.ct-media .gallery-item { flex: 0 0 min(168px, 46vw); background: var(--white); }
/* 24 khung 360° đều là ảnh VUÔNG 512×512. Thuộc tính height="480" trên <img> là
   "presentational hint" nên có hiệu lực như một khai báo height — và khi CẢ width lẫn
   height đều xác định thì `aspect-ratio` (cả 4/3 của .gallery-item img lẫn rule này)
   bị bỏ qua: ảnh bị ép cao 480px trong ô rộng 168px → chỉ thấy một dải giữa.
   `height: auto` là bắt buộc để aspect-ratio 1/1 có tác dụng, thấy trọn khung. */
.ct-media .gallery-item img { height: auto; aspect-ratio: 1 / 1; }
.ct-media .gallery-cap { padding: 1.6rem .8rem .55rem; font-size: .8rem; }
/* v5 ẩn thanh cuộn của .gallery-track vì trang chủ có nút ‹ › + kéo thả do ts-shop-fx.js lo.
   Trang chi tiết KHÔNG nạp ts-shop-fx.js → phải mở lại thanh cuộn mảnh để người dùng
   biết dải 24 khung còn cuộn ngang được (nếu không, chuột thường không có cách nào cuộn). */
.ct-media .gallery-track { scrollbar-width: thin; scrollbar-color: var(--blue) rgba(15, 23, 33, .12); }
.ct-media .gallery-track::-webkit-scrollbar { display: block; height: 6px; }
.ct-media .gallery-track::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 999px; }
.ct-media .gallery-track::-webkit-scrollbar-track { background: rgba(15, 23, 33, .12); border-radius: 999px; }


/* ============================================================================
   5) KHỐI THÔNG SỐ KỸ THUẬT (nền tối — bảng .compare-* đổi màu chữ cho hợp nền)
   ========================================================================== */
.ct-specs {
  max-width: 46rem; margin: 2.25rem auto 0;
  padding: clamp(1rem, .8rem + 1vw, 1.6rem) clamp(1.1rem, .8rem + 1.4vw, 2rem);
  background: rgba(240, 243, 246, .05);
  border: 1px solid rgba(240, 243, 246, .14);
  border-radius: var(--r-lg);
}
.ct-specs .compare-row { border-bottom-color: rgba(240, 243, 246, .14); }
.ct-specs .compare-row dt { color: var(--fg-dim); }
.ct-specs .compare-row dd { color: var(--fg); }
.ct-specs .compare-row dd a { color: var(--sky); }


/* ============================================================================
   6) THẺ SẢN PHẨM CÙNG DANH MỤC (dùng .product-card của v5, nút "Xem chi tiết" là <a>)
   ========================================================================== */
.ct-related .card-buy { display: block; text-align: center; }


/* ============================================================================
   7) CO GIÃN MÀN HÌNH NHỎ
   ========================================================================== */
@media (max-width: 900px) {
  .ct-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ct-buy { flex-direction: column; align-items: stretch; }
  .ct-qty input { width: 100%; }
  .ct-add { flex: 0 0 auto; width: 100%; }
}