/* ═══════════════════════════════════════════════════════════════════════════ * giadungplus.com V3 — danh mục cha/con (nạp ở collection + product) — FILE SINH TỰ ĐỘNG, sửa tay sẽ mất. * Sinh bởi skills/gdp-design-to-code/scripts/port_kit_css.py * --storefront --kit /var/www/giadungplus/THAMKHAO/giadungplus-design/ui_kits/website_giadungplus_com --scope .gdpw --tokens /var/www/giadungplus/.worktrees/web-v3/giadungplus.com/snippets/gdp-tokens-v2.bwt --tokens /var/www/giadungplus/THAMKHAO/giadungplus-design/ui_kits/website_giadungplus_com/tokens/colors.css --tokens /var/www/giadungplus/THAMKHAO/giadungplus-design/ui_kits/website_giadungplus_com/tokens/spacing.css --tokens /var/www/giadungplus/THAMKHAO/giadungplus-design/ui_kits/website_giadungplus_com/tokens/typography.css --css homepage/collection.css --html Trang danh mục cha giadungplus.html --html Trang danh mục giadungplus.html --js homepage/collection.js --js homepage/collection-nha-bep.js --extra /var/www/giadungplus/.worktrees/web-v3/giadungplus.com/_gdpw/gdpw-collection.extra.css --out /var/www/giadungplus/.worktrees/web-v3/giadungplus.com/assets/gdpw-collection.css --title giadungplus.com V3 — danh mục cha/con (nạp ở collection + product) * Nguồn: THAMKHAO/giadungplus-design/ui_kits/website_giadungplus_com/ (+ CSS dùng chung nếu có). * Giữ NGUYÊN VĂN cỡ chữ / khoảng cách / bo góc của kit; chỉ bọc scope .gdpw (storefront: GIỮ header/footer/reset/body + token :root của kit trong scope, * không đổi tên token, không ép cỡ chữ). * Override viết trong --extra rồi sinh lại. * ═══════════════════════════════════════════════════════════════════════════ */ /* Gốc scope: body app là 14→17px (Tailwind trên ) → ép lại theo kit (storefront). */ /* storefront: body{font} của kit đã được bọc thành .gdpw{…} bên dưới — không ép thêm. */ /* .hidden của Tailwind (0,1,0) thua selector 2 lớp của scope → JS gắn hidden mà vẫn hiện. */ .gdpw .hidden { display: none !important; } /* ═══ từ ../../THAMKHAO/giadungplus-design/ui_kits/website_giadungplus_com/homepage/collection.css ═══ */ .gdpw .crumb {display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 12px;font-size:12.5px;color:var(--t3)} .gdpw .crumb a:hover {color:var(--gdp)} .gdpw .crumb b {color:var(--t1);font-weight:600} .gdpw .crumb .ic {width:12px;height:12px} .gdpw .chd {display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:stretch;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--r12)} .gdpw .chd__body {padding:26px 28px;display:flex;flex-direction:column;justify-content:center} .gdpw .chd__eye {align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gdp);background:var(--gdp-tint);padding:4px 10px;border-radius:var(--rpill)} .gdpw .chd__eye .ic {width:12px;height:12px} .gdpw .chd h1 {font:700 30px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:12px 0 8px;text-wrap:balance} .gdpw .chd p {color:var(--t2);font-size:13.5px;max-width:62ch;text-wrap:pretty} .gdpw .chd__facts {display:flex;gap:18px;margin-top:16px;font-size:12.5px;color:var(--t2);flex-wrap:wrap} .gdpw .chd__facts div {display:flex;align-items:center;gap:6px} .gdpw .chd__facts .ic {color:var(--gdp);width:15px;height:15px} .gdpw .chd__facts b {color:var(--t1)} .gdpw .chd__img {position:relative;min-height:190px;background:var(--bg2)} .gdpw .chd__img img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gdpw .chd__img::before {content:"";position:absolute;inset:0 auto 0 0;width:60px;background:linear-gradient(90deg,#fff,transparent);z-index:1} .gdpw .subs {display:flex;gap:8px;margin-top:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .gdpw .subs::-webkit-scrollbar {display:none} .gdpw .subs a {display:flex;align-items:center;gap:10px;flex:none;height:52px;padding:0 16px 0 8px;border:1px solid transparent;border-radius:var(--rpill);background:#fff;font-weight:600;font-size:13.5px;white-space:nowrap;color:var(--t1);transition:border-color var(--dur),color var(--dur)} .gdpw .subs a img {width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg2)} .gdpw .subs a small {color:var(--t3);font-weight:500;font-size:12px;margin-left:2px} .gdpw .subs a:hover {border-color:var(--border2);color:var(--gdp)} .gdpw .subs a.on {border-color:var(--gdp);color:var(--gdp)} .gdpw .subs a.on small {color:var(--gdp)} .gdpw .cur {margin-top:36px} .gdpw .cur .sec__hd {align-items:center;margin-bottom:18px} .gdpw .pgrid--cur {grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .gdpw .pgrid--cur .pc__body {padding:14px 16px 16px;gap:8px} .gdpw .pgrid--cur .pc__name {font-size:14.5px;min-height:0;line-height:1.4} .gdpw .pgrid--cur .pc__price b {font-size:19px} .gdpw .pgrid--cur .pc__price s {font-size:12.5px} .gdpw .pgrid--cur .pc__meta {font-size:12.5px} .gdpw .pc__attr {font-size:12.5px;color:var(--t2)} .gdpw .grid--5 {grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .gdpw .grid--5>:nth-child(n+6) {display:none} .gdpw .grid--5 .pc__body {padding:12px 14px 14px} .gdpw .grid--5 .pc__name {font-size:13.5px} .gdpw .grid--5 .pc__price b {font-size:17px} .gdpw .col {display:grid;grid-template-columns:216px minmax(0,1fr);gap:28px;margin-top:22px;align-items:start} .gdpw .filt {position:sticky;top:124px} .gdpw .filt__hd {display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px} .gdpw .filt__hd .ic {width:16px;height:16px;color:var(--gdp);margin-right:6px} .gdpw .filt__hd button {font-size:12px;color:var(--gdp);font-weight:600} .gdpw .filt__x {display:none} .gdpw .fg {padding:16px 0;border-bottom:1px solid var(--border)} .gdpw .fg:last-of-type {border-bottom:0} .gdpw .fg__t {font-weight:700;font-size:13px;margin-bottom:8px} .gdpw .fg__list {display:flex;flex-direction:column;gap:1px} .gdpw .fg__list a {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;margin:0 -10px;border-radius:var(--r8);font-size:13px;color:var(--t2)} .gdpw .fg__list a span {font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums} .gdpw .fg__list a:hover {background:var(--bg2);color:var(--t1)} .gdpw .fg__list a.on {background:var(--gdp-tint);color:var(--gdp);font-weight:700} .gdpw .fg__list a.on span {color:var(--gdp)} .gdpw .chk {display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--t2);cursor:pointer;user-select:none} .gdpw .chk input {appearance:none;width:17px;height:17px;border:1.5px solid var(--border2);border-radius:5px;margin:0;display:grid;place-items:center;flex:none;background:#fff;cursor:pointer} .gdpw .chk input:checked {background:var(--gdp);border-color:var(--gdp)} .gdpw .chk input:checked::after {content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)} .gdpw .chk .star {color:#f59e0b;letter-spacing:1px} .gdpw .chk span {margin-left:auto;font-size:11.5px;color:var(--t3)} .gdpw .chips {display:flex;flex-wrap:wrap;gap:6px} .gdpw .chips button {height:30px;padding:0 12px;border-radius:var(--rpill);border:1px solid var(--border2);background:#fff;font-size:12.5px;font-weight:600;color:var(--t2)} .gdpw .chips button:hover {border-color:var(--gdp);color:var(--gdp)} .gdpw .chips button.on {background:var(--gdp);border-color:var(--gdp);color:#fff} .gdpw .filt__ft {display:none} .gdpw .tb {display:flex;align-items:center;gap:10px;margin-bottom:14px} .gdpw .tb__n {font-size:13px;color:var(--t2);white-space:nowrap} .gdpw .tb__n b {color:var(--t1)} .gdpw .tb__quick {display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0} .gdpw .tb__quick::-webkit-scrollbar {display:none} .gdpw .tb__quick button {display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:var(--rpill);border:1px solid var(--border2);background:#fff;font-size:12.5px;font-weight:600;color:var(--t2);white-space:nowrap} .gdpw .tb__quick button .ic {width:13px;height:13px} .gdpw .tb__quick button:hover {border-color:var(--gdp);color:var(--gdp)} .gdpw .tb__quick button.on {background:var(--gdp-tint);border-color:var(--gdp);color:var(--gdp)} .gdpw .tb__filt {display:none} .gdpw .sort {margin-left:auto;display:flex;align-items:center;gap:4px;height:36px;padding:0 6px 0 12px;border:1px solid var(--border2);border-radius:var(--rpill);background:#fff;font-size:12.5px;color:var(--t2);white-space:nowrap;flex:none} .gdpw .sort select {border:0;background:none;font:inherit;font-weight:700;color:var(--t1);outline:0;cursor:pointer;padding-right:4px} .gdpw .pgrid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .gdpw .pc__meta .rv {color:var(--t3)} .gdpw .pc__ship {display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#0a7a3f;background:#e6f6ec;padding:2px 7px;border-radius:4px;align-self:flex-start} .gdpw .pc__ship .ic {width:11px;height:11px} .gdpw .empty {grid-column:1/-1;text-align:center;padding:48px 20px;background:#fff;border:1px dashed var(--border2);border-radius:var(--r12);color:var(--t2)} .gdpw .empty b {display:block;font:700 16px/1.3 var(--font-display);color:var(--ink);margin-bottom:6px} .gdpw .empty .btn {margin-top:14px} .gdpw .pag {display:flex;justify-content:center;align-items:center;gap:6px;margin-top:24px} .gdpw .pag a, .gdpw .pag span {display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border-radius:var(--r8);border:1px solid var(--border2);background:#fff;font-weight:600;font-size:13px;color:var(--t2)} .gdpw .pag a:hover {border-color:var(--gdp);color:var(--gdp)} .gdpw .pag .on {background:var(--gdp);border-color:var(--gdp);color:#fff} .gdpw .pag .ic {width:14px;height:14px} .gdpw .pag .prev .ic {transform:rotate(180deg)} .gdpw .seo {margin-top:36px;padding:22px 26px;background:#fff;border:1px solid var(--border);border-radius:var(--r12);color:var(--t2);font-size:13px;line-height:1.65} .gdpw .seo--lite {background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:24px 0 0} .gdpw .seo--lite h2 {font-size:15px;color:var(--t1)} .gdpw .seo--lite.clamp {max-height:110px} .gdpw .seo--lite.clamp::after {background:linear-gradient(transparent,var(--bg0))} .gdpw .seo--lite+.seo__more {text-align:left} .gdpw .seo h2 {font:700 17px/1.3 var(--font-display);color:var(--ink);margin-bottom:8px} .gdpw .seo p+p {margin-top:8px} .gdpw .seo.clamp {position:relative;max-height:150px;overflow:hidden} .gdpw .seo.clamp::after {content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(transparent,#fff)} .gdpw .seo__more {display:block;text-align:center;margin-top:10px;font-weight:700;color:var(--gdp);font-size:12.5px} .gdpw .scrim {position:fixed;inset:0;background:rgba(31,27,24,.45);z-index:65;opacity:0;pointer-events:none;transition:opacity var(--dur)} .gdpw .scrim.on {opacity:1;pointer-events:auto} .gdpw .chd--hub {grid-template-columns:minmax(0,1fr) 400px} .gdpw .chd--hub .chd__body {padding:30px 32px} .gdpw .chd--hub h1 {font-size:36px;margin:14px 0 10px} .gdpw .chd--hub .chd__img {min-height:240px} .gdpw .chd__ctas {display:flex;gap:8px;margin-top:18px;flex-wrap:wrap} .gdpw .chd__ctas .btn {height:36px} .gdpw .tiles {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:16px} .gdpw .tile {display:flex;flex-direction:column;gap:9px;color:var(--t1)} .gdpw .tile__img {position:relative;aspect-ratio:1;border-radius:var(--r12);overflow:hidden;background:var(--bg2);border:1px solid var(--border)} .gdpw .tile__img img {width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)} .gdpw .tile:hover .tile__img img {transform:scale(1.05)} .gdpw .tile:hover {color:var(--gdp)} .gdpw .tile__n {position:absolute;top:8px;left:8px;background:rgba(255,255,255,.94);color:var(--t1);font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px} .gdpw .tile b {display:block;font-size:13.5px;font-weight:700;line-height:1.3;text-wrap:balance} .gdpw .tile span {display:block;font-size:11.5px;color:var(--t3);margin-top:2px} .gdpw .srow {margin-top:36px} .gdpw .srow__hd {display:flex;align-items:center;gap:12px;margin-bottom:14px} .gdpw .srow__hd img {width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none} .gdpw .srow__hd h2 {font:700 20px/1.2 var(--font-display);letter-spacing:-.01em} .gdpw .srow__hd small {display:block;font-size:12.5px;color:var(--t2);margin-top:2px;font-weight:400} .gdpw .srow__hd .more {margin-left:auto} .gdpw .rail6 {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} .gdpw .hub-all {margin-top:40px;padding-top:26px;border-top:1px solid var(--border)} .gdpw .hub-all .col {margin-top:14px} @media (max-width:1180px) { .gdpw .pgrid.pgrid--cur {grid-template-columns:repeat(2,minmax(0,1fr))} .gdpw .grid--5 {grid-template-columns:repeat(4,minmax(0,1fr))} .gdpw .grid--5>:nth-child(n+5) {display:none} .gdpw .chd--hub {grid-template-columns:minmax(0,1fr) 300px} .gdpw .chd--hub h1 {font-size:30px} .gdpw .tiles {grid-template-columns:repeat(3,minmax(0,1fr))} .gdpw .rail6 {grid-template-columns:repeat(4,minmax(0,1fr))} .gdpw .rail6>:nth-child(n+5) {display:none} .gdpw .col {grid-template-columns:220px minmax(0,1fr)} .gdpw .pgrid {grid-template-columns:repeat(3,minmax(0,1fr))} .gdpw .chd {grid-template-columns:minmax(0,1fr) 240px} } @media (max-width:900px) { .gdpw .cur {margin-top:24px} .gdpw .pgrid.pgrid--cur {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .gdpw .pgrid--cur .pc__body {padding:10px 12px 12px} .gdpw .pgrid--cur .pc__name {font-size:13px} .gdpw .pgrid--cur .pc__price b {font-size:16px} .gdpw .grid--5 {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .gdpw .grid--5>:nth-child(n+5) {display:none} .gdpw .seo--lite {padding-top:18px} .gdpw .filt {background:#fff} .gdpw .filt__hd {padding:14px 16px} .gdpw .fg {padding:14px 16px} .gdpw .chd--hub .chd__body {padding:16px} .gdpw .chd--hub h1 {font-size:24px} .gdpw .chd__ctas {margin-top:12px} .gdpw .tiles {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px} .gdpw .tile {gap:6px} .gdpw .tile__img {border-radius:10px} .gdpw .tile b {font-size:12px} .gdpw .tile span {font-size:11px} .gdpw .srow {margin-top:26px} .gdpw .srow__hd {gap:10px;margin-bottom:10px} .gdpw .srow__hd img {width:36px;height:36px;border-radius:9px} .gdpw .srow__hd h2 {font-size:17px} .gdpw .srow__hd small {font-size:12px} .gdpw .rail6 {display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;gap:8px} .gdpw .rail6::-webkit-scrollbar {display:none} .gdpw .rail6>* {width:150px;flex:none} .gdpw .rail6>:nth-child(n+5) {display:flex} .gdpw .hub-all {margin-top:28px;padding-top:18px} .gdpw .crumb {margin:10px 0 8px;font-size:12px} .gdpw .chd {grid-template-columns:1fr} .gdpw .chd__img {display:none} .gdpw .chd__body {padding:16px} .gdpw .chd h1 {font-size:22px;margin:8px 0 6px} .gdpw .chd p {font-size:12.5px} .gdpw .chd__facts {gap:12px;margin-top:12px;font-size:12px} .gdpw .subs {margin:12px -12px 0;padding:0 12px 2px;gap:8px} .gdpw .subs a {height:44px;font-size:12.5px;padding:0 12px 0 5px;gap:8px} .gdpw .subs a img {width:32px;height:32px} .gdpw .col {display:block;margin-top:16px} .gdpw .filt {position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;border-radius:16px 16px 0 0;border:0;max-height:82vh;overflow:auto;transform:translateY(100%);transition:transform .32s var(--ease-out);box-shadow:0 -12px 40px rgba(0,0,0,.18)} .gdpw .filt.open {transform:none} .gdpw .filt__hd {position:sticky;top:0;background:#fff;z-index:1} .gdpw .filt__x {display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg2)} .gdpw .filt__x .ic {width:16px;height:16px;color:var(--t1);margin:0;transform:rotate(45deg)} .gdpw .filt__ft {display:grid;grid-template-columns:1fr 1.6fr;gap:8px;padding:12px 16px;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border)} .gdpw .filt__ft .btn {height:42px;border-radius:var(--r8)} .gdpw .tb {gap:8px;margin-bottom:12px} .gdpw .tb__n {display:none} .gdpw .tb__filt {display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--rpill);border:1px solid var(--border2);background:#fff;font-size:12.5px;font-weight:600;color:var(--t1);flex:none} .gdpw .tb__filt .ic {width:14px;height:14px;color:var(--gdp)} .gdpw .tb__filt i {display:none;width:18px;height:18px;border-radius:9px;background:var(--gdp);color:#fff;font-size:10.5px;font-weight:800;font-style:normal;place-items:center} .gdpw .tb__filt.has i {display:grid} .gdpw .tb__quick {margin:0 -12px;padding:0 12px} .gdpw .sort {height:34px;font-size:12px} .gdpw .pgrid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .gdpw .pag {margin-top:18px} .gdpw .seo {margin-top:26px;padding:16px} .gdpw .seo h2 {font-size:15px} } /* ═══ override sau kit (/var/www/giadungplus/.worktrees/web-v3/giadungplus.com/_gdpw/gdpw-collection.extra.css) ═══ */ /* gdpw-collection.extra.css — override SAU kit (lane C sở hữu). Ghi lý do từng rule; giá trị kit giữ nguyên văn, chỉ vá chỗ theme Sapo/ dữ liệu thật buộc phải khác. Sinh lại: bash giadungplus.com/_gdpw/build_css.sh collection */ /* [C1] Nút/ô "Giao nhanh 2 giờ" chưa có dữ liệu → disabled title="Sắp có" (luật kit: không cắt, để mờ). Kit không vẽ trạng thái disabled. */ .gdpw .tb__quick button:disabled{opacity:.45;cursor:not-allowed} .gdpw .tb__quick button:disabled:hover{border-color:var(--border2);color:var(--t2)} .gdpw .chk.is-soon{opacity:.45;cursor:not-allowed} .gdpw .chk.is-soon input{cursor:not-allowed} /* [C2] Lần lọc đầu phải nạp đủ SP của danh mục (mảnh ?view=gdpwall) → lưới mờ trong lúc chờ. */ .gdpw .pgrid.is-loading{opacity:.5;pointer-events:none;transition:opacity var(--dur)} /* [C3] Danh mục chưa có ảnh (GDP_META/ảnh collection trống) → bỏ cột ảnh thay vì để khung xám rỗng. */ .gdpw .chd.chd--noimg{grid-template-columns:minmax(0,1fr)} /* [C4] Khối SEO in mô tả collection do biên tập nhập (HTML tự do: h2/h3/ảnh/danh sách) — kit chỉ có h2 + p. */ .gdpw .seo h2:not(:first-child){margin-top:14px} .gdpw .seo h3{font:700 14.5px/1.35 var(--font-display);color:var(--t1);margin:12px 0 6px} .gdpw .seo img{max-width:100%;height:auto;border-radius:var(--r8)} .gdpw .seo ul,.gdpw .seo ol{margin:8px 0;padding-left:20px} .gdpw .seo ul{list-style:disc} .gdpw .seo ol{list-style:decimal} .gdpw .seo a{color:var(--gdp)} /* [C5] Sheet lọc mobile đang mở → ẩn bong bóng chat (gdp-chat-widget của layout, z-index cao hơn .filt z:70) — không đè nút "Xem N sản phẩm". */ .gdpw-body:has(.gdpw .filt.open) .gdp-chat-bubble{visibility:hidden}