/** Theme Name: Jelly Key Author: Joiha Author URI: https://www.joiha.com Description: Artisan keycaps for mechanical keyboards. Let’s go back to the beginning, to the origin of our core philosophy: artisanship. we will discover the depth of this word, to understand why it plays a vital role in everything we do. And most importantly, in how we make artisan keycaps at Jelly Key Version: 2.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: jelly-key */ /* ============================================================ CSS tuỳ biến (chuyển từ Additional CSS / Customizer vào child theme để version-control. Nội dung giữ NGUYÊN. 2026-06-27) ============================================================ */ /* ============================================================ ROOT FONT SIZE — FIX rem-base. Astra quy đổi mọi size sang rem theo base = body (18px), nhưng html root mặc định Astra là 106.25% (17px) → declaration rem thắng px → chữ render ~17px thay vì 19 (nhỏ ~11%). Đặt root=112.5% (=18px) để 1rem=18, khớp base Astra → size hiện ĐÚNG. 2026-07-01 ============================================================ */ html { font-size: 112.5% !important; } /* 18px root */ /* ============================================================ SELF-HOSTED FONT — Source Sans 3 (variable), 1 bộ cho CẢ SITE. 2026-08-12 ============================================================ Quay lại từ Inter. Lịch sử để người sau khỏi tưởng nhầm là chưa từng thử: 2026-08-09 Hùng chê Source Sans "chán và lỗi thời" và chọn Inter sau khi so hai bản render; 2026-08-12, sau 3 ngày nhìn Inter chạy thật, anh chốt ngược lại — "Inter nhìn trên site không hợp" — và yêu cầu về Source Sans Pro. Đây là quyết định thẩm mỹ của chủ, bản nào cũng đã được nhìn tận mắt; đừng tự ý đổi tiếp. Tên họ font là 'Source Sans Pro' (không phải 'Source Sans 3') CÓ CHỦ ĐÍCH: Astra Customizer vẫn in `font-family:"Source Sans Pro"` vào , đặt trùng tên là mọi khai báo của Astra tự phân giải về đúng file này, khỏi phải đè. Sáu mặt font, chọn theo `unicode-range` + `font-style` nên khách Anh ngữ chỉ tải 1 file latin (~28KB, nhẹ hơn Inter ~19KB); italic chỉ tải khi trang thật sự có chữ nghiêng. CÓ ITALIC THẬT từ đợt này — trước đây không có file nghiêng nào mà `font-synthesis: none` lại cấm nghiêng giả, nên mọi / hiện thành chữ đứng suốt từ 2026-07-01 mà không ai thấy (đo bề ngang italic = normal trên prod mới lộ). vietnamese: cho tên cổng thanh toán tiếng Việt (chỉ hiện với khách VN). Tự host, KHÔNG gọi Google Fonts (file lấy từ bản đã cắt của Google, v19, SIL OFL 1.1). ============================================================ */ @font-face{font-family:'Source Sans Pro';src:url('fonts/SourceSans3-Variable-latin.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Source Sans Pro';src:url('fonts/SourceSans3-Variable-latinext.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Source Sans Pro';src:url('fonts/SourceSans3-Variable-vietnamese.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'Source Sans Pro';src:url('fonts/SourceSans3-Italic-latin.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Source Sans Pro';src:url('fonts/SourceSans3-Italic-latinext.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Source Sans Pro';src:url('fonts/SourceSans3-Italic-vietnamese.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;} /* ============================================================ FONT THỨ HAI — JetBrains Mono, cho NHÃN và THÔNG SỐ. 2026-08-08 ============================================================ Vì sao có font thứ hai: khách của Jelly Key là dân bàn phím cơ, phần lớn là lập trình viên — JetBrains Mono là font của giới đó, dùng nó là tín hiệu nhận diện chứ không phải trang trí. Chi tiết phạm vi ở mục JK-MONO cuối file. Cũng tự host như Source Sans, KHÔNG gọi Google Fonts (file tải về từ bản đã cắt theo bộ ký tự của Google, rồi đặt vào đây). 1 file variable gánh 400–700. latin ~31KB; latin-ext ~11KB nằm im tới khi gặp ký tự có dấu (unicode-range). ============================================================ */ @font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Variable-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Variable-latinext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ============================================================ TYPOGRAPHY — Source Sans Pro cho chữ đọc, JetBrains Mono cho nhãn/số ============================================================ 🛑 Đổi font thì sửa BIẾN, đừng đi rải tên font. Astra và Elementor đều khai tên font cụ thể ở tầng của chúng, nên bên dưới có một luật gom lại — xem chú thích ở đó. */ :root { --jk-font-sans: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { font-optical-sizing: auto; font-synthesis: none; } body { font-family: var(--jk-font-sans); line-height: 1.7; /* BỎ chống răng cưa (2026-08-13, Hùng yêu cầu): XOÁ dòng của mình chưa đủ — Astra frontend.min.css cũng khai `body{-webkit-font-smoothing:antialiased}` (đo bằng duyệt styleSheets, không đoán). Phải ép ngược về auto. Chế độ antialiased trên macOS còn làm chữ MẢNH đi một nấc — ngược yêu cầu "đỡ mỏng" cùng ngày. Các luật antialiased của FONT BIỂU TƯỢNG (astra-icon, eicon, dashicons) giữ nguyên: icon font cần nó, và chúng khai trên chính phần tử icon nên không bị dòng này đè. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } /* Luật gom: Astra in `font-family:"Source Sans Pro"` vào cho body, heading, nút và ô nhập; Elementor khai riêng cho từng widget. Đổi font ở `body` thôi thì hai tầng đó vẫn kéo trang về font cũ, mà `font-family` không kế thừa qua một khai báo cụ thể hơn. ⚠️ Danh sách này KHÔNG có `span`, `div`, `li` trần — mono đang sống ở những thẻ đó (nhãn, chip, giá, mã đơn) và một luật trần sẽ nuốt hết. Muốn thêm chỗ nào thì thêm đúng selector của chỗ đó. */ body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, /* Link BÊN TRONG tiêu đề: Astra khai font riêng cho nó, nên tên bài trên trang blog là chỗ duy nhất còn sót lại font cũ sau vòng quét đầu. Mono không sống trong heading nào có link (nhãn cột chân trang là h3 nhưng khai ở tầng class nên vẫn thắng luật này). ⚠️ Astra Addon nhắm `.blog .entry-title a` = (0,2,1), nên `:is(h1…h6) a` = (0,0,2) THUA. Phải khớp đúng độ mạnh đó rồi dựa vào việc child theme nạp sau. Đã đo lại sau khi sửa. */ :is(h1, h2, h3, h4, h5, h6) a, :is(.blog, .archive, .search, .single) :is(.entry-title, .entry-title a), .entry-content :where(h1, h2, h3, h4, h5, h6), .elementor-widget-container :where(h1, h2, h3, h4, h5, h6, p, li, a, strong, em, blockquote) { font-family: var(--jk-font-sans); } /* (Luật bù giãn chữ cho Inter từng đứng ở đây đã xoá 2026-08-12: nó bị chính khối h1/h2/h3 ngay dưới đè từ ngày đầu — cùng specificity, nạp sau thắng — nên CHƯA BAO GIỜ chạy; và các giá trị dưới vốn tinh cho Source Sans từ 2026-07, nay lại đúng font.) */ /* Heading: cùng font. SIZE và WEIGHT do Astra Customizer quản. * * ⚠ ĐỌC TRƯỚC KHI ĐỊNH SỬA WEIGHT Ở ĐÂY. Ba dòng này từng khai font-weight 700/700/600 * kèm chú thích "đè weight 200 mảnh cũ" — nhưng CHƯA BAO GIỜ CHẠY. Astra in CSS * Customizer thẳng vào , trong đó có `.entry-content :where(h2){font-weight:200}` * = specificity (0,1,0) vì `.entry-content` là một class (`:where()` tính 0). Muốn đè * phải từ (0,1,1) trở lên, `h2` trần hay `body h2` đều thua. Đã đo 2026-08-08. * * Lịch sử "ĐỪNG đè": bản 08-08 dặn giữ nguyên nét 200 vì tương phản với 700 * ("One Ball, **One World** artisan keycaps"). 2026-08-13 chính Hùng chốt lại: "H1, H2 * quá mỏng, chỉnh cho đỡ mỏng hơn (đỡ thôi)" — nên nhích 200 → 300 (font biến thiên * 200–900, 300 có thật). 300 vẫn là nét mảnh, 700 bên trong vẫn tương phản rõ; * KHÔNG lên 400+ — đó là câu Hùng đã gạt từ 08-08. Luật nằm ngay dưới ba dòng * line-height, dùng :is() để đạt (0,1,1) thắng cả hai luật 200 của Astra. * * Thang chữ cho GIỎ HÀNG + THANH TOÁN nằm ở khối biến --jk-fs-* trong mục JK-CC. */ h1 { line-height: 1.15; letter-spacing: -0.02em; } h2 { line-height: 1.2; letter-spacing: -0.015em; } h3 { line-height: 1.3; letter-spacing: -0.01em; } /* Nét H1/H2: 200 → 300 (2026-08-13, xem chú thích trên). Chỉ nhắm hai chỗ đang thật sự ăn nét 200 của Astra — nội dung bài viết và khối Elementor; các heading Woo (giỏ, tài khoản, sản phẩm) đã có luật riêng mạnh hơn, luật này không với tới. ⚠️ `.elementor` chứ KHÔNG `.elementor-widget-container`: Elementor "optimized DOM" đã bỏ wrapper đó (đo trang chủ 2026-08-13 — querySelector ra RỖNG), còn `.elementor` là class gốc của mọi tài liệu Elementor kể cả template Canvas không có .entry-content. */ .entry-content :is(h1, h2), .elementor :is(h1, h2) { font-weight: 300; } /* JK-READING START — nhịp đọc kiểu sách + tối ưu hiển thị chữ. 2026-07-01 */ p { text-wrap: pretty; } h1, h2, h3, h4, .entry-title, .page-title, .woocommerce div.product .product_title { text-wrap: balance; } .entry-content p { margin: 0 0 1.35em; } .entry-content :is(h2, h3, h4) { margin-top: 1.7em; margin-bottom: .5em; } .entry-content :is(h2, h3, h4):first-child { margin-top: 0; } /* JK-READING END */ /* Archive header (vd trang "Artisan Keycaps"): Astra dùng rem base lạ (14) → phóng to bất thường ở root 18. Ép px để đúng thang. 2026-07-01 (2026-08-13: 34 → 32px — tiêu đề trang đã chốt MỘT cỡ 32/700 toàn site từ 08-09; dòng 34px này là số cũ còn sót, thua luật 32px phía dưới nên lâu nay không chạy — sửa cho hết mâu thuẫn trong file, đúng bài học kiểu-4.) */ .ast-archive-description .ast-archive-title { font-size: 32px !important; line-height: 1.15; } .ast-archive-description p { font-size: 18px !important; line-height: 1.6; } /* JK-SPACING START — khe TIÊU ĐỀ TRANG → NỘI DUNG: một mốc sp-6 cho mọi trang. Đo 2026-08-13 (Hùng: "khoảng cách không theo nguyên tắc gì cả"): bốn kiểu trang ra bốn khe — giỏ/thanh toán/đăng nhập 27px, tài khoản 36px, blog 26px, lưới shop 45px — toàn mặc định Astra mỗi template một kiểu, không ai chọn. */ #content .entry-header { margin-bottom: var(--jk-sp-6) !important; } /* Khe thật = max(margin header, margin content) vì hai margin GẬP vào nhau — Astra cho .entry-content margin-top 36 nên chỉ set header là chưa đủ (đo 2026-08-13). */ #content .entry-header + .entry-content { margin-top: 0 !important; } #content .entry-header + .entry-content > :first-child { margin-top: 0; } /* Blog (.jk-arch tự dựng) và lưới shop (.ast-archive-description của Astra) không đi qua .entry-header — set cùng mốc. Chuỗi shop cần thắng padding/margin Astra addon. */ body.ast-woo-shop-archive .ast-archive-description { margin-bottom: var(--jk-sp-6) !important; padding-bottom: 0 !important; } /* JK-SPACING END */ /* ============================================================ ACCOUNT / CART / CHECKOUT — phân cấp rõ, tương phản tốt, cảm giác tin cậy. Tên SP đậm; biến thể (Gourmet Pastries/Tray) nhạt-gọn, KHÔNG đậm hơn tên; giá rõ nét; TỔNG cộng đậm nổi bật; header bảng rõ; nav mục chọn đậm. 2026-07-01 ============================================================ */ /* Header bảng (Order/Date/Status/Total · Product/Price/Qty/Subtotal) — rõ, chắc */ .woocommerce table.shop_table thead th, .woocommerce-orders-table thead th, .woocommerce-cart-form table.cart thead th, .woocommerce-checkout-review-order-table thead th { font-weight: 600; color: #2b2b2b; letter-spacing: .01em; } /* Ô dữ liệu bảng — đủ tương phản (không xám lợt) */ .woocommerce-orders-table tbody td, .woocommerce-cart-form table.cart td { color: #3a3a3a; } /* Tên SP / số đơn = neo chính: đậm 600, mực đậm */ .woocommerce-cart-form .product-name > a, .woocommerce-checkout-review-order-table .product-name, .woocommerce-orders-table__cell-order-number a { font-weight: 600; color: #111; } .woocommerce-orders-table__cell-order-number a { text-decoration: none; } /* Biến thể = phụ: nhạt, gọn, KHÔNG đậm hơn tên SP */ .woocommerce .product-name dl.variation, .woocommerce-checkout-review-order-table .product-name dl.variation { margin: 6px 0 0; font-size: .94em; color: #6a6a6a; line-height: 1.5; } .woocommerce .product-name dl.variation dt { font-weight: 500; color: #6a6a6a; margin-right: .35em; } .woocommerce .product-name dl.variation dd, .woocommerce .product-name dl.variation dd p { font-weight: 400; color: #6a6a6a; margin: 0; } /* "× 2" là thông số → mono (mục 2b JK-CC). Đo 2026-08-13: checkout ra sans 18/400, view-order ra sans 17/700 — cùng một thứ hai kiểu, và luật cũ ở đây không thắng nổi strong. Gom cả hai bảng về một kiểu, !important để đè b/strong của Astra. */ .woocommerce-checkout-review-order-table .product-quantity, .woocommerce-account.logged-in table.order_details .product-quantity { font-family: var(--jk-font-mono); font-size: var(--jk-fs-label); color: #6a6a6a; font-weight: 500 !important; } /* Giá / tiền: rõ nét, đậm vừa */ .woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal, .woocommerce-checkout-review-order-table .product-total, .woocommerce-orders-table__cell-order-total { color: #111; font-weight: 500; } /* Subtotal (số tiền mỗi món): in ĐẬM — desktop + mobile. !important vì Astra set .woocommerce-cart table.shop_table .woocommerce-Price-amount{400} specificity cao hơn */ .woocommerce-cart-form .product-subtotal .woocommerce-Price-amount { font-weight: 700 !important; color: #111; } /* Tiêu đề khối checkout — fallback cho heading nào KHÔNG nằm trong danh sách chuẩn của JK-CC (thang --jk-fs-title 22px/600 !important, tự thắng luật này ở mọi heading nó gọi tên). `.cart_totals > h2` đã bỏ khỏi danh sách 2026-08-12: JK-CC quản nó rồi. */ .woocommerce-checkout h3, #customer_details h3, .woocommerce-billing-fields > h3, .woocommerce-additional-fields > h3 { font-weight: 700; color: #111; } /* Nhãn hàng trong tổng (Subtotal/Shipping/Total) */ .cart_totals th, .woocommerce-checkout-review-order-table tfoot th { color: #2b2b2b; font-weight: 600; } /* TỔNG cộng: đậm, nổi bật → tin cậy */ .cart_totals .order-total th, .cart_totals .order-total .amount, .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total .amount { font-weight: 700; color: #111; } /* (Hai luật nav account cũ đã GỠ 2026-08-12: JK-MYACCOUNT (dưới) thắng cả hai bằng specificity (0,3,2) > (0,2,3) nên chúng là mã chết từ 08-09 — kiểu 700 cho mục đang chọn chưa bao giờ ăn. Nav giờ sống trọn ở JK-MYACCOUNT.) */ /* Form checkout: nhãn dễ đọc */ .woocommerce-checkout .form-row label, .woocommerce form .form-row label { color: #555; font-weight: 500; } /* JK-ACCT-CART-CHECKOUT END */ /* ============================================================ CART MOBILE — thẻ compact: ảnh nhỏ bên TRÁI, thông tin dồn bên PHẢI (thay vì ảnh nhỏ nằm giữa 1 block trống to → thừa chỗ). Chỉ <=768. Cách: neo ảnh position:absolute trái, tr padding-left chừa chỗ → các td (display:block do Astra) tự xếp cột phải. Đè layout mobile Astra. 2026-07-02 ============================================================ */ @media (max-width: 768px) { /* thẻ món: padding trong 20px (khớp khung Cart totals), chừa 84px ảnh bên trái */ .woocommerce-cart-form table.cart tr.cart_item { position: relative; display: block; padding: 14px 20px 14px 118px !important; /* trái 20 lề + 84 ảnh + 14 gap = 118; phải 20 */ min-height: 104px; } .woocommerce-cart-form table.cart tr.cart_item + tr.cart_item { border-top: 1px solid var(--ast-border-color, #e2e2e2); /* đường ngăn giữa món */ } /* BẢO HIỂM: mọi td trong món bỏ padding 1rem + border của Astra (đây là nguồn gây thừa khoảng cách) */ .woocommerce-cart-form table.cart tr.cart_item td { padding: 0 !important; margin: 0 !important; border: 0 !important; text-align: left !important; } .woocommerce-cart-form table.cart tr.cart_item td::before { padding: 0 !important; } /* ảnh: neo trái-trên */ .woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail { position: absolute; left: 20px; top: 18px; width: 84px; display: block; } .woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail img { width: 84px; height: auto; display: block; } /* × xoá: góc trên-phải */ .woocommerce-cart-form table.cart tr.cart_item td.product-remove { position: absolute; top: 14px; right: 20px; width: auto; } .woocommerce-cart-form table.cart tr.cart_item td.product-thumbnail::before, .woocommerce-cart-form table.cart tr.cart_item td.product-remove::before, .woocommerce-cart-form table.cart tr.cart_item td.product-name::before { display: none !important; } /* tên SP: block, đa dòng */ .woocommerce-cart-form table.cart tr.cart_item td.product-name { display: block; padding: 0 34px 8px 0 !important; } /* Price / Quantity / Subtotal: hàng ĐỀU nhau + SÁT nhau */ .woocommerce-cart-form table.cart tr.cart_item td.product-price, .woocommerce-cart-form table.cart tr.cart_item td.product-quantity, .woocommerce-cart-form table.cart tr.cart_item td.product-subtotal { display: flex !important; align-items: center; min-height: 31px !important; /* !important: đè min-height 3.25rem của Astra */ line-height: 1.2; padding: 2px 34px 2px 0 !important; } /* nhãn: bỏ float trái Astra; KHÔNG in đậm mobile (desktop giữ nguyên) */ .woocommerce-cart-form table.cart tr.cart_item td.product-price::before, .woocommerce-cart-form table.cart tr.cart_item td.product-quantity::before, .woocommerce-cart-form table.cart tr.cart_item td.product-subtotal::before { float: none !important; display: inline; margin-right: .5em; font-weight: 400; color: #3a3a3a; } /* ô số lượng: ÉP cả input lẫn nút +/- về cùng 30px (reset padding/min-height của input → khỏi lệch) */ .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity { display: inline-flex; align-items: center; margin: 0; } .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity input.qty { height: 31px !important; min-height: 0 !important; line-height: 31px !important; padding: 0 4px !important; box-sizing: border-box !important; } .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity .minus, .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity .plus { height: 31px !important; line-height: 29px !important; box-sizing: border-box !important; } /* 🛑 `flex: 0 0 auto` KHÔNG thừa. Ô `td.product-quantity` là flex (nhãn "Quantity:" + viên số lượng), mà mặc định flex cho phép CO phần tử con xuống dưới cả bề ngang đã khai. Luật width:40px ở khối máy bàn vì thế chỉ là gợi ý: đo 2026-08-28 trên giỏ có 3 món, nút trừ/cộng còn **6×31px ở khổ 344** (màn ngoài máy gập) và **11×31px ở khổ 360** (Android nhỏ) — nhỏ tới mức bấm không trúng, ngay trên trang khách sửa đơn. Số đo tỉ lệ 1:1 với bề ngang cửa sổ, đúng chữ ký của "phần tử flex đang gánh phần thiếu chỗ của cả hàng". Khoá lại thì cả ba khổ đều về 40×31px. */ .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity { flex: 0 0 auto; } .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity .minus, .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity .plus, .woocommerce-cart-form table.cart tr.cart_item td.product-quantity .quantity input.qty { flex: 0 0 auto; min-width: 34px; } } .woocommerce-Price-amount, .price { font-feature-settings: "tnum" 1; font-variant-numeric: lining-nums tabular-nums; } .entry-meta, figcaption, .product-meta { font-size: 16px; letter-spacing: 0.01em; line-height: 1.5; } /* JK-TYPO START — chuẩn hoá typography. Size h4–h6 do Astra quản; đây chỉ weight/màu. 2026-07-01 */ h4, h5, h6 { font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #111; } /* Tên sản phẩm ở lưới shop: bỏ ép viết-hoa-đầu-từ, nét rõ thay vì 200 mảnh */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-loop-product__title { text-transform: none; font-weight: 500; color: #111; letter-spacing: -0.01em; line-height: 1.45; } /* Tiêu đề widget (sidebar: Categories / Search / Tags…): chắc nét, không in hoa */ .widget-title, .widget .widget-title { font-weight: 600; color: #111; text-transform: none; letter-spacing: -0.01em; } /* Bỏ ép capitalize ở post-meta (tôn trọng chữ gốc) */ .entry-meta, .post-meta, .ast-blog-meta-container { text-transform: none; } /* JK-TYPO END */ /* ============================================================ BREADCRUMBS ============================================================ */ .ast-breadcrumbs-wrapper { padding-bottom: 20px; margin-bottom: 0; border-bottom: 0; } .ast-breadcrumbs-wrapper .breadcrumb-trail, .ast-breadcrumbs-wrapper .trail-items { font-size: 16px; letter-spacing: .01em; } /* #8c887e cho tỉ lệ tương phản 3,54:1 trên nền trắng — dưới chuẩn AA 4,5:1 cho chữ 16px. Về token xám của site (--jk-muted #6A6A6A = 5,41:1). Đo 2026-08-16. */ .ast-breadcrumbs-wrapper .trail-items a { color: var(--jk-muted, #6A6A6A) !important; text-decoration: none; transition: color .15s ease; } /* Rê tới thì ĐẬM MỰC + GẠCH CHÂN, không nhuộm đỏ — xem quy ước ở JK-HOVER cuối file. */ .ast-breadcrumbs-wrapper .trail-items a:hover { color: var(--jk-ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ast-breadcrumbs-wrapper .trail-items .trail-end { color: #1c1b18 !important; } .ast-breadcrumbs-wrapper .trail-items li::after { content: ">" !important; padding: 0 .55em !important; color: #c9c4b8 !important; } /* ============================================================ LAYOUT ============================================================ */ #primary.content-area.primary { margin: 2em 0; } .woocommerce div.product div.images { margin-bottom: 0.5em; } fieldset { border: 0; } /* ============================================================ NHÃN THUỘC TÍNH — "Designs : Scorched Sands" ... ============================================================ */ .woocommerce div.product .variations th.label, .woocommerce div.product .variations td.label { text-align: left; vertical-align: middle; } /* Nhãn và GIÁ TRỊ phải khác bậc. Trước đây cả hai cùng 18px/500 — cùng cỡ, cùng nét, cùng màu, nên "DESIGNS" và "Copper Canyon" đọc ra một cục chữ to chứ không ra "nhãn : giá trị". Font mono + cỡ chữ đặt ở mục JK-MONO cuối file. */ .woocommerce div.product .variations .label label { color: var(--jk-muted); } .woocommerce div.product .variations .woo-selected-variation-item-name { font-weight: 500; letter-spacing: 0; text-transform: none; color: #1c1b18; } .woocommerce div.product .variations th.label { line-height: 1 !important; } .woocommerce div.product .variations .label label { display: inline-block; line-height: 1; margin-top:4px; /* nhích chữ chạm mép ảnh; chỉnh -1 đến -4 cho vừa mắt */ } /* ---- Ô CHỌN THẢ XUỐNG khi sản phẩm KHÔNG có swatch ---- Plugin swatch chỉ đổi gốc — và cái đó chưa ai đụng tới: chữ 18px (mọi thứ quanh nó 13–16), cao 44 (ô số lượng 52, nút mua 50), bo 3px (cả khối còn lại bo 12), mũi tên là ảnh SVG 26px của Astra dán ở 98% nên lệch hẳn về mép. Đo trên "Dessert Boutique": select 492×44 chữ 18px cạnh nút 190×50 chữ 15px. Cân lại cho khớp đúng bộ đang dùng ở khối mua. */ .woocommerce div.product .variations select { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 52px; padding: 0 42px 0 15px; border: 1px solid var(--jk-line); border-radius: var(--jk-r-ctl); background-color: #fff; /* Mũi tên tự vẽ: 12px, neo theo MÉP PHẢI (không phải 98% — 98% của ô rộng 492px đẩy mũi tên ra tận rìa, ô hẹp thì lại thụt vào). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; font-family: var(--jk-font-mono); font-size: 15px; font-weight: 400; letter-spacing: -.01em; line-height: 52px; color: var(--jk-ink); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .woocommerce div.product .variations select:hover { border-color: #C9C9C9; } .woocommerce div.product .variations select:focus { border-color: var(--jk-ink); box-shadow: 0 0 0 3px var(--jk-red-ring); outline: none; } /* Hàng nhãn → ô chọn: bảng .variations của Woo xếp mỗi thuộc tính một hàng ; cho ô thở đều thay vì dính vào nhãn phía trên. */ .woocommerce div.product .variations td.value { padding-top: 8px; } /* Khe GIỮA các hàng chỉ được nằm trên Ô NHÃN — nhãn là thứ mở đầu một hàng mới. Bản cũ đè 18px lên CẢ td.value: các ô xếp chồng (display:block) nên ô chọn của hàng 2-3 bị đẩy xa nhãn của CHÍNH NÓ 27px trong khi hàng đầu chỉ 9px — Hùng bắt được trên trang không swatch 2026-08-12 ("2 cái dưới form chọn cách xa tên"), và trang swatch cũng dính y hệt (đo Pastry Buffet: td.value hàng 2 cũng pad-top 18). */ .woocommerce div.product .variations tr + tr th.label { padding-top: 18px; } .woocommerce div.product .variations tr + tr td.value { padding-top: 0; } /* "Out of stock" đang là ĐỎ TƯƠI #FF0000 mặc định của Woo — màu thứ tư, chói hơn cả sắc đỏ thương hiệu #D42027 dùng cho nút mua, nên mắt nhảy vào dòng này trước cả giá. Cỡ chữ phải viết đủ dài: WooCommerce có `.woocommerce-js div.product form.cart p.stock` (4 class + 3 thẻ) đặt 0.9em; chuỗi ngắn `.woocommerce div.product .summary .stock` chỉ 4 class + 1 thẻ nên THUA, dù file mình nạp sau. */ .woocommerce div.product form.cart p.stock, .woocommerce div.product .summary p.stock { font-size: 14px; line-height: 1.5; color: var(--jk-red); } .woocommerce div.product form.cart p.stock.in-stock, .woocommerce div.product .summary p.stock.in-stock { color: var(--jk-muted); } /* ============================================================ CART FORM + SỐ LƯỢNG + ADD TO CART ============================================================ */ /* (.reset_variations không còn luật ở đây: functions.php trả chuỗi rỗng cho woocommerce_reset_variations_link nên link "Clear" không bao giờ render.) */ /* ⚠️ Cả rổ luật layout của Astra cho form này treo sau class `.woocommerce-js` — class đó do JS của Woo gắn, mà JS bị FlyingPress hoãn ~3,5s → CLS 0,47 (bảng swatch 2 cột sập về 1 cột). GỐC RỄ đã xử ở functions.php: in sẵn `woocommerce-js` vào body từ server (filter body_class, tìm "In sẵn class"). Đừng chép luật Astra bỏ tiền tố vào đây nữa — đã thử, vá được display:block thì còn lộ padding:0, rồi float nút, đuổi không hết; một dòng body_class phủ tất. Hai luật dưới là override CỦA MÌNH đè Astra (line-height 1.8 thay 2em), giữ tiền tố .woocommerce-js như cũ để khớp specificity. */ .woocommerce-js div.product form.cart .variations td.label { margin-top: 0; } .woocommerce-js div.product form.cart .variations td, .woocommerce-js div.product form.cart .variations th { line-height: 1.8em; } /* hàng: số lượng + nút */ /* ⚠️ Luật cũ ở đây gộp `.woocommerce-variation-add-to-cart` và `.quantity` vào MỘT chuỗi chọn nối bằng dấu phẩy, với một dòng chú thích chen vào giữa. Sửa "cái ô số lượng" mà chỉ thay vế thứ hai thì viền mới dính luôn cả khối bọc ngoài — trên điện thoại thành một cái khung to bao cả nút mua. Đã tách hẳn ra hai luật. */ /* Khung viền phải nằm ở VỎ NGOÀI. Trước đây viền do ba ô con (− / số / +) tự vẽ, còn vỏ `border:0` — nên đặt `border-radius` lên vỏ chẳng bo được gì (không có nét nào để bo), và mép trái còn thừa ra một vạch lửng. Giờ: vỏ vẽ khung + bo góc, ba ô con bỏ hết viền, chỉ ô số giữ hai nét dọc làm vách ngăn. */ .woocommerce div.product .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--jk-line); border-radius: var(--jk-r-ctl); overflow: hidden; background: #fff; } .woocommerce div.product .quantity .minus, .woocommerce div.product .quantity .plus, .woocommerce div.product .quantity .qty { border: 0 !important; background: #fff; } .woocommerce div.product .quantity .qty { border-left: 1px solid var(--jk-line) !important; border-right: 1px solid var(--jk-line) !important; } .woocommerce div.product .quantity .minus, .woocommerce div.product .quantity .plus, .woocommerce div.product .quantity .qty { height: 50px !important; box-shadow: none !important; vertical-align: middle; } .woocommerce div.product .quantity .minus, .woocommerce div.product .quantity .plus { width: 34px; line-height: 48px !important; color: #56534c; } .woocommerce div.product .quantity .qty { width: 50px; font-weight: 400; } /* nút add to cart */ .woocommerce div.product form.cart .button.single_add_to_cart_button { /* 52px chứ không 50: ô số lượng bên cạnh cao 50px RUỘT + 1px viền trên/dưới = 52px ngoài, và ô chọn biến thể phía trên cũng 52px. Để 50 thì nút thấp hơn ô số lượng đúng 2px — đủ để hàng mua nhìn ra "lệch" mà không ai chỉ được tại sao. Khu này là họ 52px; nút 54px của giỏ/thanh toán là họ khác, đừng gộp. */ min-height: 52px; height: auto; width: auto !important; /* bỏ ép 33% của Astra → nút vừa đủ chữ */ min-width: 190px; /* đủ chứa "Add to cart" + dấu ✓ trên 1 dòng */ padding: 0 28px !important; /* 18px/400 là cỡ chữ NỘI DUNG — nút cuối cùng của một đơn hàng không nên trông như một câu văn. Cỡ + font mono đặt ở mục JK-MONO. */ font-weight: 600 !important; white-space: nowrap; /* KHÔNG xuống hàng */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Đỏ hệ thống, không phải đỏ Astra. 2026-08-09: đo trên prod thấy nút này là #CE1A1A (mặc định Astra) trong khi nút Log in, nút "Proceed to checkout" và nút đặt hàng đều #D42027 — hai sắc đỏ cho cùng một họ hành động, và cái lệch lại là nút bán hàng. Ba nút kia sửa từ đợt trước, riêng nút này chỉ được sửa kích thước nên màu còn sót. */ background: var(--jk-red) !important; color: #fff !important; } /* 🛑 Phải loại trừ hai trạng thái xám, nếu không hover THẮNG chúng và nút "chưa chọn biến thể" hoá đỏ ngay khi rê chuột: chuỗi hover là (0,6,2), chuỗi `.disabled` bên dưới chỉ (0,5,2) — cùng có !important nên hơn nhau đúng một bậc class. */ .woocommerce div.product form.cart .button.single_add_to_cart_button:not(.disabled):not(.wc-variation-selection-needed):hover { background: var(--jk-red-dark) !important; } @media (max-width: 480px) { .woocommerce div.product .quantity .minus, .woocommerce div.product .quantity .plus { width: 38px; } .woocommerce div.product .quantity .qty { width: 46px; } .woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 auto; padding: 0 18px !important; } } /* Link "View cart" (Astra Pro single-product AJAX add-to-cart chèn sau nút): flex-wrap hàng qty+nút. Desktop: View cart INLINE cạnh nút, canh giữa dọc. Mobile (<=768): xuống RIÊNG 1 dòng canh giữa. Không set column-gap → giữ spacing Astra. */ .woocommerce div.product .woocommerce-variation-add-to-cart, .woocommerce div.product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; } .woocommerce div.product .added_to_cart.wc-forward { order: 99; align-self: center; /* nằm cuối hàng, khớp giữa dọc với nút */ margin: 0 0 0 16px; padding: 0; font-size: 17px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } @media (max-width: 768px) { .woocommerce div.product .added_to_cart.wc-forward { flex: 1 0 100%; margin: 0; text-align: center; white-space: normal; } /* Ô số lượng và nút mua CÙNG MỘT HÀNG trên điện thoại — trước đây nút bị đẩy xuống dòng riêng, ăn thêm ~62px chiều cao ở đúng chỗ màn hình hẹp nhất. Thủ phạm là `min-width:190px` của nút: 130px (ô số lượng) + 190px + khe > 335px bề ngang khả dụng, nên hàng flex bọc xuống. Bỏ min-width, cho nút co giãn. Vẫn giữ `flex-wrap: wrap` để link "View cart" xuống dòng riêng như cũ. */ .woocommerce div.product .woocommerce-variation-add-to-cart, .woocommerce div.product form.cart:not(.variations_form) { column-gap: 10px; } .woocommerce div.product .quantity { flex: 0 0 auto; margin-right: 0 !important; } .woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 auto; min-width: 0 !important; padding: 0 14px !important; } } /* ============================================================ VARIATIONS TABLE ============================================================ */ .variations, .variations tr, .variations td { border: none !important; } .ast-variation-button-group .ast-single-variation { padding: 0 0.5em; margin-bottom: 0.5em; margin-right: 0.3em; } .ast-variation-button-group .ast-single-variation.active { border: 3px solid var(--ast-global-color-0); } /* ============================================================ PRODUCT TABS — ẩn cả thanh tab (chỉ còn 1 tab Description, panel vẫn hiện) ============================================================ 2026-08-12: trước đây ẩn bằng `font-size: 0` trên + margin âm bù chỗ + tắt ::before/::after — ba luật cho một việc, và font-size:0 là đúng anti-pattern đã gây tai nạn với mô tả ngắn (một khối font-size nạp sau là chữ tab hiện lại). Link rỗng cũng vẫn nhận focus bàn phím — mục tiêu bấm vô hình. `display:none` trên cả