/* =====================================================================
   Trang chủ — khối "Kho linh kiện đủ loại" (17/09/2026)
   Lưới 6 danh mục: CSS vẽ sẵn bố cục CUỐI (ô lớn + ô nhỏ xen kẽ). js/hl-catmorph.js (GSAP +
   ScrollTrigger) đặt các ô về lưới đều 3x2 rồi cuộn tới đâu dàn lại tới đó. Không có JS / người dùng
   bật giảm chuyển động thì vẫn thấy bố cục cuối, không mất gì.
   Dưới 768px: lưới 2 cột tĩnh, ô chỉ trượt hiện dần.
   Quay lui: xoá khối .hl-cm trong views/hl-home.blade.php là xong.
   ===================================================================== */

.hl-cm { padding: 22px 6px 6px; }

.hl-cm__head { display: flex; align-items: flex-end; gap: 14px 22px; flex-wrap: wrap; padding-bottom: 22px; }
.hl-cm__intro { min-width: 0; margin-right: auto; }
.hl-cm__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: #6E675A; }
.hl-cm__title {
    margin: 10px 0 0; font-size: 44px; font-weight: 700; letter-spacing: -.045em; line-height: 1.02;
    color: var(--hl-ink, #2B2418);
}
/* từng chữ của tiêu đề trượt lên (js bọc chữ vào 2 lớp span) */
.hl-cm__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hl-cm__w > span { display: inline-block; }
.hl-cm__hint { margin: 0; max-width: 290px; font-size: 12.5px; font-weight: 500; line-height: 1.7; color: #6E675A; text-wrap: pretty; }
.hl-cm__all {
    display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 14px;
    background: var(--hl-ink, #2B2418); color: #FFD874; font-size: 13px; font-weight: 700; white-space: nowrap;
    transition: background .2s ease, transform .2s ease;
}
/* thẻ <a> bị luật .hl-body a (0-1-1) tô thành chữ cam — phải viết đủ .hl-body a.xxx, xem hl-theme.css */
.hl-body a.hl-cm__all, .hl-body a.hl-cm__all:hover { color: #FFD874; }
.hl-cm__all:hover { background: #3E3322; transform: translateX(2px); }

/* ---------- Lưới ---------- */

.hl-cm__grid { position: relative; width: 100%; height: 560px; }
.hl-cm__tile { position: absolute; padding: 6px; }
.hl-cm__tile:nth-child(1) { left: 0;   top: 0;   width: 52%; height: 66%; }
.hl-cm__tile:nth-child(2) { left: 52%; top: 0;   width: 48%; height: 33%; }
.hl-cm__tile:nth-child(3) { left: 52%; top: 33%; width: 24%; height: 33%; }
.hl-cm__tile:nth-child(4) { left: 76%; top: 33%; width: 24%; height: 33%; }
.hl-cm__tile:nth-child(5) { left: 0;   top: 66%; width: 52%; height: 34%; }
.hl-cm__tile:nth-child(6) { left: 52%; top: 66%; width: 48%; height: 34%; }

/* ít hơn 6 danh mục (admin chưa đủ cả gốc lẫn con): lưới đều, không dàn */
.hl-cm__grid:not(.hl-cm__grid--6) { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hl-cm__grid:not(.hl-cm__grid--6) .hl-cm__tile { position: static; width: auto; height: 250px; padding: 0; }

/* ---------- Ô ---------- */

.hl-cm__card {
    --cm-bg: #EFEADF; --cm-ink: #5C5344; --cm-glow: rgba(140, 120, 80, .22);
    position: relative; isolation: isolate; container-type: size;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
    width: 100%; height: 100%; padding: 20px; border-radius: 20px; overflow: hidden;
    background: var(--cm-bg); color: var(--hl-ink, #2B2418);
}
.hl-cm__card::before {
    content: ""; position: absolute; z-index: -1; right: -18%; top: -30%; width: 75%; aspect-ratio: 1;
    border-radius: 50%; background: radial-gradient(circle, var(--cm-glow), transparent 68%); pointer-events: none;
}
.hl-body a.hl-cm__card, .hl-body a.hl-cm__card:hover { color: var(--hl-ink, #2B2418); }
.hl-cm__card:focus-visible { outline: 3px solid var(--hl-ink, #2B2418); outline-offset: 3px; }

.hl-cm__card--0 { --cm-bg: #E4EDFA; --cm-ink: #2A4F8C; --cm-glow: rgba(63, 127, 216, .30); }
.hl-cm__card--1 { --cm-bg: #FFF3D6; --cm-ink: #8A4E06; --cm-glow: rgba(240, 162, 2, .30); }
.hl-cm__card--2 { --cm-bg: #FFE6E0; --cm-ink: #8A2F1C; --cm-glow: rgba(196, 71, 47, .24); }
.hl-cm__card--3 { --cm-bg: #E6F3EB; --cm-ink: #175F44; --cm-glow: rgba(46, 155, 114, .26); }
.hl-cm__card--4 { --cm-bg: #F0EAFA; --cm-ink: #4A3A7A; --cm-glow: rgba(110, 86, 180, .24); }
.hl-cm__card--5 { --cm-bg: #EFEADF; --cm-ink: #5C5344; --cm-glow: rgba(140, 120, 80, .22); }

/* ảnh danh mục: đĩa tròn góc trên phải, co giãn theo ô khi lưới dàn lại */
.hl-cm__art {
    position: absolute; z-index: -1; right: 16px; top: 16px;
    width: 40%; width: min(46cqw, 56cqh); aspect-ratio: 1;
    border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .78);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .42), 0 16px 34px rgba(60, 40, 10, .12);
    display: grid; place-items: center; color: var(--cm-ink);
}
.hl-cm__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-cm__ph { display: none; width: 46%; height: 46%; }
.hl-cm__art.is-empty .hl-cm__ph { display: block; }

.hl-cm__count { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--cm-ink); }
.hl-cm__name { font-size: 21px; font-weight: 700; letter-spacing: -.028em; line-height: 1.14; color: var(--hl-ink, #2B2418); text-wrap: pretty; max-width: 62%; }
.hl-cm__desc {
    font-size: 12px; font-weight: 500; line-height: 1.55; color: #5C5344; text-wrap: pretty; max-width: 62%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Ngưỡng tính theo vùng NỘI DUNG của ô (đã trừ padding 20px mỗi bên), không phải cỡ viền ngoài. */
@container (min-width: 380px) {
    .hl-cm__name { font-size: 24px; }
    .hl-cm__name, .hl-cm__desc { max-width: 55%; }
}
@container (max-height: 180px) {
    .hl-cm__desc { display: none; }
    .hl-cm__name { font-size: 18px; }
}
/* ô ngang rộng mà thấp: vẫn đủ chỗ cho 1 dòng mô tả */
@container (min-width: 380px) and (max-height: 180px) and (min-height: 110px) {
    .hl-cm__desc { display: -webkit-box; -webkit-line-clamp: 1; }
}
/* ô hẹp: ảnh nhỏ lại để tên được chạy hết bề ngang, khỏi xuống dòng sớm */
@container (max-width: 260px) {
    .hl-cm__art { width: min(38cqw, 48cqh); }
    .hl-cm__name, .hl-cm__desc { max-width: none; }
}

/* ---------- Máy tính bảng ---------- */

@media (max-width: 1100px) {
    .hl-cm__title { font-size: 38px; }
    .hl-cm__grid { height: 520px; }
}

/* ---------- Điện thoại: 2 cột tĩnh ---------- */

@media (max-width: 767px) {
    .hl-cm { padding: 12px 0 2px; }
    .hl-cm__head { padding: 0 4px 12px; gap: 10px; align-items: flex-end; }
    .hl-cm__eyebrow { font-size: 9.5px; letter-spacing: .18em; }
    .hl-cm__title { font-size: 26px; letter-spacing: -.035em; line-height: 1.06; margin-top: 7px; }
    .hl-cm__hint { display: none; }
    .hl-cm__all { padding: 8px 12px; border-radius: 12px; font-size: 12px; }

    .hl-cm__grid,
    .hl-cm__grid:not(.hl-cm__grid--6) { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .hl-cm__grid .hl-cm__tile { position: static; width: auto; height: auto; padding: 0; }

    .hl-cm__card { container-type: normal; min-height: 150px; padding: 14px; gap: 4px; border-radius: 16px; }
    .hl-cm__art { width: 60px; height: 60px; right: 11px; top: 11px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .42), 0 8px 18px rgba(60, 40, 10, .1); }
    .hl-cm__count { font-size: 9px; letter-spacing: .1em; }
    .hl-cm__name { font-size: 14.5px; letter-spacing: -.02em; line-height: 1.16; max-width: none; }
    .hl-cm__desc { display: none; }
}