/** * Tom Luxury — Danh sach du an (plan §28.4) * ----------------------------------------------------------------------------- * Chi ap dung khi co class .tl-projects-archive (danh muc du an do quan * tri vien chon trong Tuy bien). Moi danh muc san pham khac giu nguyen giao dien. * * Lop goc: .tl-parch__* (parch = projects archive) * Nap o wp_enqueue_scripts priority 210 => thang moi rule cu trong style.css. * ----------------------------------------------------------------------------- */ /* ============================================================================= * 1. THANH CONG CU: chu dan + bo loc danh muc con * * LUU Y PHAN CHIA VIEC: phan dau trang (tieu de danh muc + breadcrumb, khoi * .shop-page-title) la thanh phan DUNG CHUNG cho moi archive san pham nen file * nay KHONG dung toi — de tranh danh nhau voi phan giao dien archive san pham. * ========================================================================== */ .tl-parch__toolbar { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: var(--rule-w) solid var(--color-border); } .tl-parch__eyebrow { margin: 0; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-luxury-gold); } .tl-parch__filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); } .tl-parch__filter-label { font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); } .tl-parch__filter-list { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; } .tl-parch__filter-item { line-height: 1; } .tl-parch__chip { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: var(--space-3xs) var(--space-sm); background-color: var(--color-surface); border: var(--rule-w) solid var(--color-border); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--weight-medium); letter-spacing: .02em; text-decoration: none; color: var(--color-secondary); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tl-parch__chip:hover, .tl-parch__chip:focus-visible { border-color: var(--color-luxury-gold); color: var(--color-luxury-gold); } .tl-parch__chip.is-current { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); } /* ============================================================================= * 2. DANH SACH — mot cot, the anh lon nam ngang * Ghi de lop .products cua Flatsome (display:flex + margin am cua .row). * ========================================================================== */ .tl-projects-archive .products.tl-parch__list { display: flex; flex-direction: column; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; } .tl-parch__item { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: 0; width: 100%; min-width: 0; margin: 0; padding: 0; background-color: var(--color-surface); border: var(--rule-w) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .tl-parch__item:hover, .tl-parch__item:focus-within { border-color: var(--color-gold-line); box-shadow: var(--shadow-soft); transform: translateY(-4px); } /* --- 2.1 Anh ------------------------------------------------------------- * Tren may tinh anh phai cao bang ca the. KHONG dung "height:100%" cung voi * aspect-ratio: trinh duyet se suy BE NGANG tu chieu cao, khien anh tran sang * cot chu. Thay vao do dat anh tuyet doi phu kin o luoi va tat aspect-ratio. * ---------------------------------------------------------------------- */ .tl-parch__media { position: relative; min-width: 0; min-height: 280px; background-color: var(--color-shade); } .tl-parch__ratio { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; } .tl-parch__ratio > img { transition: transform var(--dur-slow) var(--ease-out); } .tl-parch__item:hover .tl-parch__ratio > img, .tl-parch__item:focus-within .tl-parch__ratio > img { transform: scale(1.04); } /* Lop phu toi o day anh — giu chu de doc duoc khi the xep doc tren mobile */ .tl-parch__media::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(to top, var(--color-overlay-soft), transparent); pointer-events: none; } /* --- 2.2 Noi dung -------------------------------------------------------- */ .tl-parch__body { display: flex; min-width: 0; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); } .tl-parch__title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-h4); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary); overflow-wrap: break-word; } .tl-parch__link { color: inherit; text-decoration: none; } .tl-parch__link:hover, .tl-parch__link:focus-visible { color: var(--color-luxury-gold); } /* Vung bam phu kin the nhung van giu mot the that su cho ban phim */ .tl-parch__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tl-parch__item { position: relative; } /* Link "Xem cong trinh" nam tren lop phu de van bam duoc rieng */ .tl-parch__cta { position: relative; z-index: 2; margin-top: auto; align-self: flex-start; color: var(--color-luxury-gold); } /* Sua cuc bo: tl_link() chen san mot