/* Theme Name: MONA Theme Theme URI: https://mona.media Author: MONA Media Author URI: https://mona.media Description: Premium WordPress theme by MONA Media. Mobile-first, accessible, SEO-ready, optimized for Core Web Vitals. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: mona Tags: ecommerce, woocommerce, block-theme-ready, accessibility-ready, translation-ready, custom-logo, custom-menu, featured-images, sticky-post, threaded-comments */ /* ============================================================ * Reset body margin — WordPress adds context classes (.blog, .home, * .archive, .single, .page) to . Some template page CSS files use * bare selectors like `.blog { margin: 16rem 0 }` for the section.blog * element, which unintentionally cascade to body.blog (posts page) and * push the entire page down. This neutralizes that collision. * ============================================================ */ body, body.blog, body.home, body.archive, body.search { margin: 0; } /* ============================================================ * Visually-hidden but accessible (screen-reader only) * — must be out of flow (position: absolute) so it doesn't * affect surrounding layout. Override common.css's broken * width:0; height:0; opacity:0 — element was still inline. * Same pattern as WP's .screen-reader-text utility. * ============================================================ */ .hide-sitename, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; } .screen-reader-text:focus { position: fixed !important; top: 1rem; left: 1rem; z-index: 10000; width: auto; height: auto; padding: 1rem 1.6rem; margin: 0; clip: auto; clip-path: none; background: #fff; color: #000; opacity: 1; } /* ============================================================ * Contact Form 7 — neutralize plugin wrappers so the form * inherits the template's `form .form-*` styling exactly. * ============================================================ */ /* CF7 wraps every input in — make * it transparent for layout (display: contents so children flow as if no wrap). */ form .wpcf7-form-control-wrap { display: contents; } /* Textarea: template CSS targets `form textarea` directly; ensure the * wpcf7-textarea variant inherits the same look. */ form .wpcf7-textarea { width: 100%; min-height: 12rem; } /* Submit button: CF7 renders instead of the template's * . The .btn rules from * common.css mostly apply, but inline submit needs an explicit cursor. */ form .wpcf7-submit { cursor: pointer; border: 0; } /* CF7 spinner — hide when not loading, position next to submit. */ form .wpcf7-spinner { display: none; } form.submitting .wpcf7-spinner { display: inline-block; } /* Validation message tweaks. */ form .wpcf7-response-output { margin-top: 1.6rem; padding: 1.2rem 1.6rem; border-radius: 0.8rem; font-size: 1.4rem; } form .wpcf7-not-valid-tip { margin-top: 0.4rem; color: #c0392b; font-size: 1.3rem; } form .wpcf7-form-control.wpcf7-not-valid { border-color: #c0392b; } /* Hide the hidden CF7 fieldset gracefully (no border, no spacing). */ form .hidden-fields-container { display: contents; } .section-video { margin-top: 8rem; position: relative; background-image: url(/wp-content/themes/monatheme/assets/images/home/bg.png); background-repeat: no-repeat; background-size: cover; background-position: bottom 100% right; margin: 16rem 0rem 16rem; } /* ============================================================ * Contact CTA — chống rớt chữ lẻ ở dòng cuối tiêu đề. * * Mặc định trình duyệt nhồi tối đa chữ lên dòng trên rồi bỏ lại * 1 chữ đứng lẻ ở dòng cuối ("… TRONG 5 / PHÚT"). `text-wrap: balance` * chia đều số chữ cho các dòng nên không còn chữ mồ côi. * * Đây là progressive enhancement: trình duyệt không hỗ trợ (Chrome < 114, * Safari < 17.5, Firefox < 121) chỉ đơn giản xuống dòng như cũ, không vỡ layout. * ============================================================ */ .contact-title h2 { text-wrap: balance; }