/* ========================================================================== MR.VŨ — Thay toàn bộ hệ thống chữ cho giao diện hiện tại -------------------------------------------------------------------------- Open Sans / Arial / EB Garamond → Be Vietnam Pro / Cormorant Garamond File này nạp SAU CÙNG, sau style3.css. Nó chỉ đụng tới chữ: font-family, font-weight, line-height, letter-spacing, text-transform. Không đổi màu, không đổi bố cục, không đổi khoảng cách khối. VÌ SAO ĐỔI FONT Be Vietnam Pro được thiết kế riêng cho tiếng Việt. Arial và Open Sans đặt dấu ngã, dấu mũ và dấu móc hơi lệch ở cỡ nhỏ — thấy rõ nhất ở những chữ như "Vũ", "ườ", "ẫ", "ợ". Đây là lý do kỹ thuật, không phải sở thích. EB Garamond hiện đang được gọi ở 41 chỗ trong CSS nhưng phần lớn rơi về serif mặc định của trình duyệt. Cormorant Garamond thay thế, có hỗ trợ tiếng Việt đầy đủ. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · BIẾN FONT Khai báo một chỗ, dùng khắp nơi. Sau này muốn đổi font chỉ sửa 2 dòng. -------------------------------------------------------------------------- */ :root { --mrvu-sans: "Be Vietnam Pro", "Open Sans", "Segoe UI", Roboto, Arial, sans-serif; --mrvu-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif; /* Ghi đè biến của 2 file landing page — nhờ vậy toàn bộ trang sản phẩm landing cũng đổi theo mà không phải sửa file gốc nào. */ --lp-serif: var(--mrvu-serif); --lp-sans: var(--mrvu-sans); --lpe-serif: var(--mrvu-serif); --lpe-sans: var(--mrvu-sans); } /* -------------------------------------------------------------------------- 2 · LỚP NỀN — áp cho toàn site -------------------------------------------------------------------------- */ body, button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6, p, blockquote, li, dt, dd, label, legend, caption, figcaption, th, td, .widget, .widgettitle, .widget-title { font-family: var(--mrvu-sans); } body { font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Be Vietnam Pro nét mảnh hơn Arial một chút ở cùng cỡ chữ, nên nội dung dài cần giãn dòng rộng hơn để vẫn dễ đọc. */ p { line-height: 1.68; } /* -------------------------------------------------------------------------- 3 · GỠ FONT GÁN CỨNG TRONG style3.css 13 selector dưới đây gán thẳng Arial/Helvetica, có độ ưu tiên cao hơn lớp nền ở trên nên phải gọi đích danh từng cái. -------------------------------------------------------------------------- */ .owl-carousel .owl-nav button span, .sidebar .sidebar-title, .pages_title, .cat_pro_title, .box_more .title, .specify-product .title, .related-post .title, .img_feedback .title, .woocommerce-billing-fields h3, #order_review_heading, .box_title .title, .menu_mobile > li > a { font-family: var(--mrvu-sans); } /* -------------------------------------------------------------------------- 4 · CHỮ SERIF — chỉ dùng cho tiêu đề lớn DESIGN.md 3.3: serif phải ngắn và trang nhã. Không dùng cho giao diện dày đặc, bảng giá hay thông số kỹ thuật. -------------------------------------------------------------------------- */ .box_title .title, .box_title .title a, .pages_title, .cat_pro_title, .sidebar .sidebar-title, .entry-title, .single-post .content-post > h1, .woocommerce-products-header__title { font-family: var(--mrvu-serif); font-weight: 600; letter-spacing: -.4px; line-height: 1.18; } /* Cormorant Garamond có x-height thấp hơn Arial đáng kể, và bỏ chữ hoa toàn phần cũng làm dòng chữ thấp đi. Cùng một font-size khai báo, kết quả nhìn luôn nhỏ hơn bản Arial-hoa gốc. Tăng bù để giữ đúng trọng lượng thị giác ban đầu — không phải để làm to hơn. */ .box_title .title { font-size: 38px; /* gốc 36px */ } .sidebar .sidebar-title { font-size: 22px; /* gốc 18px — bù lớn hơn vì đồng thời mất cả hoa lẫn đậm */ } @media (max-width: 767px) { .box_title .title { font-size: 26px; } } /* -------------------------------------------------------------------------- 5 · BỎ CHỮ HOA TOÀN PHẦN DESIGN.md 3.3: chỉ dùng chữ hoa cho nhãn rất nhỏ, tên bộ sưu tập, hoặc dòng dẫn đề. Tiêu đề và tên sản phẩm phải viết thường. LƯU Ý: CSS chỉ tắt được chữ hoa DO CSS tạo ra. Tên sản phẩm gõ hoa sẵn trong cơ sở dữ liệu vẫn hiện hoa — phải sửa trong WooCommerce. -------------------------------------------------------------------------- */ .cart-title, /* tên sản phẩm trong lưới */ .capt, /* chú thích dự án, tin tức */ .box_more .title, .woocommerce-billing-fields h3, #order_review_heading, #menu_bar_mobile .title, .menu_mobile > li > a, .footer-title, .sidebar .sidebar-title, .pages_title, .cat_pro_title, .box_title .title { text-transform: none; } /* Giữ chữ hoa cho nhãn nhỏ — đúng ngoại lệ DESIGN.md cho phép, thêm giãn chữ để chữ hoa dễ đọc hơn. */ .button_call-label, .onsale, .badge, .wc-block-components-product-badge { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } /* -------------------------------------------------------------------------- 6 · TÊN SẢN PHẨM -------------------------------------------------------------------------- */ .cart-title, .cart-title a, .product-item .cart-title, .woocommerce-loop-product__title { font-family: var(--mrvu-sans); font-size: 14.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0; } /* -------------------------------------------------------------------------- 7 · GIÁ TIỀN DESIGN.md 3.3: giá không bao giờ dùng serif trang trí. tabular-nums giữ mọi chữ số cùng bề rộng để cột giá thẳng hàng khi so sánh nhiều sản phẩm — lý do kỹ thuật, không phải thẩm mỹ. -------------------------------------------------------------------------- */ .price, .price *, .amount, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol, .price-product, .price-product *, .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--mrvu-sans) !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; } .price ins, .price ins .amount { text-decoration: none; font-weight: 700; } .price del, .price del .amount { font-weight: 400; } /* -------------------------------------------------------------------------- 8 · SỐ LIỆU KỸ THUẬT & BẢNG Bảng thông số quạt toàn số — cùng bề rộng thì cột mới thẳng. -------------------------------------------------------------------------- */ table td, table th, .shop_table td, .woocommerce-product-attributes td, .woocommerce-product-attributes th, .cart_totals td, .order-total td, .quantity input, .woocommerce-orders-table td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } table th, .shop_table th { font-weight: 600; } /* -------------------------------------------------------------------------- 9 · ĐIỀU HƯỚNG & MENU -------------------------------------------------------------------------- */ .header_menu .menu > li > a, .menu_mobile > li > a, #menu_bar_mobile .title { font-family: var(--mrvu-sans); letter-spacing: 0; } .menu_mobile > li > a { font-size: 16px; font-weight: 600; line-height: 1.45; } #menu_bar_mobile .title { font-size: 18px; font-weight: 600; letter-spacing: .01em; } /* -------------------------------------------------------------------------- 10 · NÚT -------------------------------------------------------------------------- */ .button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .single_add_to_cart_button, .link_center .link { font-family: var(--mrvu-sans); font-weight: 600; letter-spacing: 0; } /* Số điện thoại luôn dùng chữ số cùng bề rộng — dễ đọc, dễ nhớ. */ .header_hotline, .hotline_mb, .btc_text, .button_call { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* -------------------------------------------------------------------------- 11 · NỘI DUNG BÀI VIẾT Chiều dài dòng và giãn dòng theo DESIGN.md body.md. -------------------------------------------------------------------------- */ .content-post, .entry-content, .mrvu-intro, .readmore_content { font-family: var(--mrvu-sans); font-size: 16px; line-height: 1.68; } .content-post h2, .entry-content h2 { font-family: var(--mrvu-serif); font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.3px; text-transform: none; } .content-post h3, .entry-content h3 { font-family: var(--mrvu-sans); font-size: 20px; font-weight: 600; line-height: 1.35; text-transform: none; } .content-post h4, .entry-content h4 { font-family: var(--mrvu-sans); font-size: 17px; font-weight: 600; line-height: 1.4; } /* DESIGN.md 3.3: đừng in đậm mọi tiêu đề. h5, h6 dùng độ đậm vừa. */ .content-post h5, .content-post h6, .entry-content h5, .entry-content h6 { font-family: var(--mrvu-sans); font-weight: 500; } /* -------------------------------------------------------------------------- 12 · FOOTER -------------------------------------------------------------------------- */ #footer, #footer p, #footer li, #footer a { font-family: var(--mrvu-sans); } .footer-title { font-family: var(--mrvu-sans); font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; } /* -------------------------------------------------------------------------- 13 · FORM -------------------------------------------------------------------------- */ input, textarea, select, .wpcf7 input, .wpcf7 textarea, .select2-container, .select2-container .select2-selection__rendered { font-family: var(--mrvu-sans); font-size: 15px; } ::placeholder { font-family: var(--mrvu-sans); font-weight: 400; } /* -------------------------------------------------------------------------- 14 · BẢO VỆ FONT BIỂU TƯỢNG Khẳng định lại để chắc chắn không có luật nào ở trên vô tình biến biểu tượng thành ô vuông. Đây là lỗi kinh điển khi thay font toàn site. -------------------------------------------------------------------------- */ .fa, .fas, .far, .fal, .fad, .fab, [class^="fa-"], [class*=" fa-"], .fa::before, .fas::before, .far::before, .fab::before, [class^="fa-"]::before, [class*=" fa-"]::before { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important; } .fab, .fab::before, [class^="fa-facebook"]::before, [class^="fa-youtube"]::before, [class^="fa-instagram"]::before, [class^="fa-tiktok"]::before { font-family: "Font Awesome 5 Brands" !important; } .glyphicon, .glyphicon::before { font-family: "Glyphicons Halflings" !important; } .genericon, .genericon::before { font-family: "Genericons" !important; } /* Biểu tượng tự vẽ bằng CSS của theme */ .icon_up::before, .touch_menu::before, .icon_search_mb::before, .owl-nav button span { font-family: inherit; } /* -------------------------------------------------------------------------- 15 · MÃ NGUỒN -------------------------------------------------------------------------- */ code, pre, kbd, samp, tt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; }