/* Trang tĩnh (Pages) — số đo lấy trực tiếp từ bjjfightgear.com (pages/), xem ghi chú trong templates/page.html. */ /* Tiêu đề — 27px/800/uppercase/Montserrat, căn giữa, trong khối rộng 1400px, margin 50px trên/dưới. */ .bjj-page-masthead { margin-top: 50px; margin-bottom: 50px; } .bjj-page-title.bjj-page-title { font-family: var(--wp--preset--font-family--montserrat); font-size: 27px; font-weight: 800; text-transform: uppercase; text-align: center; color: var(--wp--preset--color--contrast); margin: 0; } /* Nội dung — cột hẹp 680px căn giữa, Open Sans 16px/line-height 26px, heading con Montserrat 800/uppercase, blockquote viền trái xanh accent-2, link đỏ accent-1 không gạch chân — đúng hệ thống đã dùng cho bài blog (assets/css/single-post.css), áp dụng lại cho trang tĩnh. CHỈ áp width hẹp + typography này cho trang nội dung thường (Privacy/Terms/Refund...) — KHÔNG áp cho Cart/Checkout/My account: 3 trang đó do WooCommerce Blocks render (bảng giỏ hàng, form thanh toán 2 cột...) cần rộng hơn nhiều 680px, ép hẹp sẽ vỡ layout. WooCommerce tự gắn class woocommerce-cart/-checkout/-account vào cho đúng 3 trang này — dùng để loại trừ thay vì phải sửa PHP điều kiện riêng. */ body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content { max-width: 680px; margin-left: auto; margin-right: auto; padding-left: 25px; padding-right: 25px; padding-bottom: 60px; font-family: var(--wp--preset--font-family--open-sans); font-size: 16px; line-height: 26px; color: var(--wp--preset--color--contrast); } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content p { margin: 0 0 16px; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content h2 { font-family: var(--wp--preset--font-family--montserrat); font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.625; margin: 32px 0 16px; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content h3 { font-family: var(--wp--preset--font-family--montserrat); font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.625; margin: 32px 0 16px; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content strong { font-weight: 700; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content ul, body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content ol { margin: 0 0 16px; padding-left: 20px; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content blockquote { border-left: 2px solid var(--wp--preset--color--accent-2); padding: 0 0 0 16px; margin: 16px 40px 16px 0; font-style: normal; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content blockquote p { margin: 0; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content a { color: var(--wp--preset--color--accent-1); text-decoration: none; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content a:hover { text-decoration: underline; } @media (max-width: 782px) { .bjj-page-title.bjj-page-title { font-size: 22px; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content h2 { font-size: 20px; } body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .bjj-page-content h3 { font-size: 18px; } } /* ========================================================================== Trang "Đơn hàng đã nhận" (order-received / trang cảm ơn) ========================================================================== CẤU TRÚC KHÁC HẲN các trang khác — đây là điều phải biết trước khi sửa: trang này KHÔNG có .entry-content hay .bjj-page-content bọc ngoài. Template order-confirmation của WooCommerce đặt thẳng 5 khối block làm con trực tiếp của
, mỗi khối mang class .alignwide nên ăn wideSize 1400px của theme: .wc-block-order-confirmation-status (lời cảm ơn) .wc-block-order-confirmation-summary (mã đơn / ngày / tổng / email / thanh toán) .wc-block-order-confirmation-totals-wrapper (bảng chi tiết) .wc-block-order-confirmation-address-wrapper (địa chỉ, dạng 2 cột) .wc-block-order-confirmation-additional-information Vì thế mọi luật ở đầu file (nhắm .bjj-page-content) đều không chạm tới trang này, và nó rơi về mặc định của Twenty Twenty-Five: Open Sans 22px/weight 300 trải hết 1400px — to và thô hẳn so với các trang khác. Phải nhắm thẳng vào các khối trên. Trang này chỉ có văn bản + 1 bảng, thuộc nhóm "trang đọc" chứ không phải "trang thao tác" nhiều cột như Thanh toán, nên bó về 860px cho dễ đọc. Dùng class .woocommerce-order-received trên body để tách đúng nó, không đụng trang Thanh toán thật (hai trang dùng chung page id). */ body.woocommerce-order-received main > .wc-block-order-confirmation-status, body.woocommerce-order-received main > .wc-block-order-confirmation-summary, body.woocommerce-order-received main > .wc-block-order-confirmation-totals-wrapper, body.woocommerce-order-received main > .wc-block-order-confirmation-address-wrapper, body.woocommerce-order-received main > .wc-block-order-confirmation-additional-information { max-width: 860px; margin-left: auto; margin-right: auto; font-family: var(--wp--preset--font-family--open-sans); font-size: 16px; line-height: 1.65; font-weight: 400; color: var(--wp--preset--color--contrast); } body.woocommerce-order-received main > [class*="wc-block-order-confirmation"] p { font-size: 16px; font-weight: 400; line-height: 1.65; margin: 0 0 16px; } /* Tiêu đề mục ("Chi tiết đơn hàng", "Địa chỉ thanh toán") — mặc định 24px không uppercase, khác hẳn quy ước tiêu đề của site. */ body.woocommerce-order-received main h2, body.woocommerce-order-received main h3 { font-family: var(--wp--preset--font-family--montserrat); font-size: 16px; font-weight: 800; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; color: var(--wp--preset--color--contrast); margin: 30px 0 12px; } /* Câu chốt "Cảm ơn bạn. Đơn hàng của bạn đã được nhận." — to hơn thân bài một bậc để đọc lướt vẫn thấy ngay, nhưng vẫn dưới cỡ tiêu đề. */ body.woocommerce-order-received main > .wc-block-order-confirmation-status p { font-size: 17px; font-weight: 600; margin-bottom: 22px; } /* --- Hàng tóm tắt đơn --- */ body.woocommerce-order-received main > .wc-block-order-confirmation-summary { padding: 18px 20px; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 4px; background: var(--wp--preset--color--accent-5); /* Khối này là