@charset "UTF-8"; /* Theme Name: BKIT Theme URI: https://bkit.vn/ Author: BKIT Author URI: https://bkit.vn/ Description: BKIT Flat Design theme – hỗ trợ font Tiếng Việt. Arial, 18px, line-height 1.5, #ff0000 header, #ffffff background, #000000 text. Version: 2.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bkit */ /* * FONT STRATEGY: * Font-family is NOT set in CSS because WordPress/Gutenberg injects its own * font-family via global-styles-inline-css, theme.json, and inline style * attributes — all of which override theme CSS regardless of specificity * or !important. * * Instead, font-family is enforced by a JavaScript MutationObserver * (see functions.php → bkit_font_enforcer_script) that runs in * and forces the Vietnamese-friendly font stack on every element, * including dynamically added ones. */ /* Reset & Base Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: Arial, "Segoe UI", Roboto, sans-serif; font-size: 18px; line-height: 1.5; color: #000000; background-color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 800; color: #000000; margin-bottom: 1rem; line-height: 1.4; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1.1rem; } /* Body text elements */ p, li, td, th, label, input, textarea, select, span, blockquote, figcaption, pre, code { font-size: 18px; line-height: 1.5; color: #000000; } a { color: #000000; text-decoration: none; transition: all 0.15s ease; } a:hover { color: #ff0000; text-decoration: underline; } /* Header & Navigation (#ff0000 background) */ .site-header { background-color: #ff0000; border-bottom: 3px solid #000000; padding: 1rem 2rem; } .site-header .container { display: flex; justify-content: space-between; align-items: center; max-width: 1560px; margin: 0 auto; } .site-branding { display: flex; align-items: center; gap: 12px; } .site-logo { height: 45px; width: auto; object-fit: contain; } .site-title { color: #ffffff; font-size: 1.5rem; font-weight: 900; margin-bottom: 0; letter-spacing: -0.5px; } .main-navigation ul { display: flex; list-style: none; gap: 20px; } .main-navigation a { color: #ffffff; font-weight: 700; font-size: 18px; padding: 6px 12px; border: 2px solid transparent; } .main-navigation a:hover { background-color: #000000; color: #ffffff; text-decoration: none; border: 2px solid #000000; } /* Main Content Area */ .site-main { max-width: 1560px; margin: 2rem auto; padding: 0 2rem; } /* Flat Design Cards & Articles */ .post-card { background-color: #ffffff; border: 3px solid #000000; padding: 2rem; margin-bottom: 2rem; transition: all 0.15s ease; } .post-card.has-post-thumbnail { display: flex; gap: 2rem; } .single .post-card.has-post-thumbnail { display: block; } .post-card.has-post-thumbnail .post-thumbnail { flex: 0 0 350px; } .post-card.has-post-thumbnail .post-thumbnail img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 3px solid #000000; box-shadow: 4px 4px 0px #000000; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; } .post-card.has-post-thumbnail .post-thumbnail a:hover img { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px #000000; } .post-card.has-post-thumbnail .post-content-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .post-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0px #000000; } .post-title { color: #000000; font-weight: 800; } h1.post-title { font-size: 1rem; } .post-title a { color: #000000; } .post-title a:hover { color: #ff0000; text-decoration: none; } .post-meta { font-size: 16px; color: #555555; margin-bottom: 1rem; } .post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; margin-bottom: 1.5rem; } .post-tags a { font-size: 14px; font-weight: 700; color: #000000; background-color: #ffffff; padding: 6px 12px; border: 2px solid #000000; box-shadow: 3px 3px 0px #000000; text-transform: uppercase; transition: all 0.1s ease; } .post-tags a:hover { background-color: #ff0000; color: #ffffff; box-shadow: 1px 1px 0px #000000; transform: translate(2px, 2px); text-decoration: none; } /* Flat Buttons */ .btn-flat, input[type="submit"], button, .submit, #submit { background-color: #ff0000; color: #ffffff; font-weight: 800; text-transform: uppercase; padding: 10px 20px; border: 2px solid #000000; box-shadow: 4px 4px 0px #000000; cursor: pointer; transition: all 0.1s ease; } .btn-flat:hover, input[type="submit"]:hover, button:hover, .submit:hover, #submit:hover { background-color: #000000; color: #ffffff; box-shadow: 2px 2px 0px #000000; transform: translate(2px, 2px); } #submit, .btn-flat { font-weight: normal; } /* Flat Forms */ input[type="text"], input[type="email"], input[type="url"], textarea, select { width: 100%; padding: 10px 14px; border: 2px solid #000000; background-color: #ffffff; color: #000000; font-size: 18px; outline: none; } input:focus, textarea:focus, select:focus { border-color: #ff0000; box-shadow: 3px 3px 0px #000000; } /* Footer Section */ .site-footer { border-top: 3px solid #000000; background-color: #ffffff; padding: 3rem 2rem; margin-top: 4rem; } .site-footer .container { max-width: 1560px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-info { display: flex; align-items: center; gap: 12px; } .footer-copyright { font-size: 18px; } /* Comment Reply Title */ .comment-reply-title, #reply-title { font-weight: normal; } /* Responsive Media Queries */ @media (max-width: 768px) { .post-card.has-post-thumbnail { flex-direction: column; } .post-card.has-post-thumbnail .post-thumbnail { flex: 0 0 auto; width: 100%; margin-bottom: 1.5rem; } }