/*
Theme Name: Xô Ngọc Phát
Theme URI: https://xongocphat.vn
Author: Phan Tấn Can
Author URI: https://xongocphat.vn
Description: Giao diện WordPress được chuyển đổi từ HTML tĩnh, sử dụng Tailwind CSS cho Xô Ngọc Phát - Giải Pháp Điện & PCCC.
Version: 1.0
Text Domain: xongocphat
*/

/* ==========================================================================
   1. GLOBAL STYLES & HÌNH ẢNH
   ========================================================================== */
body {
    background-color: #ffffff;
}

/* Container ảnh chuẩn tỷ lệ */
.img-container-square { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; }
.img-container-square img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; transition: transform 0.5s ease; }
.img-container-landscape { position: relative; width: 100%; padding-bottom: 65%; overflow: hidden; }
.img-container-landscape img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }


/* ==========================================================================
   2. HEADER & MENU ĐIỀU HƯỚNG
   ========================================================================== */
/* Glassmorphism Header */
.header-glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Menu Desktop */
#primary-menu { display: flex; align-items: center; gap: 2.5rem; height: 100%; margin: 0; padding: 0; list-style: none; }
#primary-menu li { height: 100%; display: flex; align-items: center; }
#primary-menu li a { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #0d1f40; text-decoration: none; height: 100%; display: flex; align-items: center; position: relative; transition: color 0.3s ease; }
#primary-menu li:hover > a, #primary-menu li.current-menu-item > a, #primary-menu li.current-page-ancestor > a { color: #e52320 !important; }
#primary-menu li a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: #e52320; transition: width 0.3s ease; border-radius: 4px 4px 0 0; }
#primary-menu li:hover > a::after, #primary-menu li.current-menu-item > a::after, #primary-menu li.current-page-ancestor > a::after { width: 100%; }

/* Menu Mobile */
#mobile-menu-list { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
#mobile-menu-list li a { display: block; padding: 0.875rem 1rem; border-radius: 0.75rem; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #0d1f40; transition: all 0.3s ease; }
#mobile-menu-list li:hover > a { background-color: #f9fafb; }
#mobile-menu-list li.current-menu-item > a { background-color: #fef2f2; color: #e52320; }


/* ==========================================================================
   3. ARCHIVE, BỘ LỌC & PHÂN TRANG (PAGINATION)
   ========================================================================== */
/* Ẩn thanh cuộn bộ lọc trên mobile */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Giao diện Phân trang WordPress */
.custom-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; margin: 0 0.25rem; background-color: white; color: #4b5563; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.custom-pagination a.page-numbers:hover { background-color: #f9fafb; }
.custom-pagination span.current { background-color: #0f2444; color: white; border-color: #0f2444; }
.custom-pagination .dots { background-color: transparent; border: none; box-shadow: none; color: #9ca3af; }


/* ==========================================================================
   4. NỘI DUNG BÀI VIẾT (SINGLE POST) & TRANG TĨNH (PAGE)
   ========================================================================== */
.page-content { max-width: 900px; margin-left: auto; margin-right: auto; }
.post-content h2, .page-content h2 { font-size: 1.5rem; font-weight: 700; color: #0f2444; margin-top: 2.5rem; margin-bottom: 1.25rem; }
.post-content h3, .page-content h3 { font-size: 1.25rem; font-weight: 700; color: #0f2444; margin-top: 2rem; margin-bottom: 1rem; }
.post-content h4, .page-content h4 { font-size: 1.15rem; font-weight: 600; color: #0f2444; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.post-content p, .page-content p { margin-bottom: 1.25rem; line-height: 1.8; color: #4b5563; }
.post-content ul, .page-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; color: #4b5563; }
.post-content ol, .page-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; color: #4b5563; }
.post-content li, .page-content li { margin-bottom: 0.5rem; }
.post-content img, .page-content img { border-radius: 0.5rem; margin: 2rem auto; height: auto; display: block; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.post-content blockquote, .page-content blockquote { border-left: 4px solid #1a56db; font-style: italic; color: #4b5563; background: #f4f7fe; padding: 1.25rem 1.5rem; border-radius: 0.25rem; margin-bottom: 1.5rem; }
.page-content a, .post-content a { color: #1a56db; text-decoration: underline; font-weight: 500; }
.page-content a:hover, .post-content a:hover { color: #e53935; }
.page-content table, .post-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.page-content th, .post-content th, .page-content td, .post-content td { border: 1px solid #e5e7eb; padding: 0.75rem 1rem; text-align: left; }
.page-content th, .post-content th { background-color: #f9fafb; color: #0f2444; font-weight: 600; }


/* ==========================================================================
   5. CONTACT FORM 7 (TRANG LIÊN HỆ)
   ========================================================================== */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 13px; background-color: rgba(249, 250, 251, 0.5); margin-top: 0.5rem; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: #0f2444; box-shadow: 0 0 0 1px #0f2444; }
.wpcf7 input[type="submit"] { width: 100%; background-color: #0f2444; color: white; font-weight: bold; padding: 0.875rem; border-radius: 0.5rem; font-size: 13px; cursor: pointer; transition: all 0.3s; margin-top: 1rem; }
.wpcf7 input[type="submit"]:hover { background-color: #1e3a8a; }