/*!
Theme Name: Hybrid Theme by Viettd
Theme URI: http://underscores.me/
Author: Viettd
Author URI: http://Viettd.asia
Description: I simply wanted to do something with my own hands!
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hybrid-theme-by-viettd
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Hybrid Theme by Viettd is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* 1. BIẾN SỐ & CÀI ĐẶT CHUNG */
:root {
    --color-dark: #1a1a1a;
    --color-light: #ffffff;
    --color-accent: #c09b57;
    --font-primary: 'Manrope', -apple-system, sans-serif;
    --container-width: 1240px;
    --header-height: 65px;
    --radius-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-primary);
    color: var(--color-dark);
    line-height: 1.6;
    margin: 0;
}

img { max-width: 100%; height: auto; display: block; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* 2. HEADER (Xử lý Logo to) */
.site-header {
    height: var(--header-height);
    background: #014034;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Giới hạn kích thước Logo - Rất quan trọng */
.site-branding img {
    max-height: 45px; /* Logo chỉ cao tối đa 50px */
    width: auto;
}

.site-branding a {
    text-decoration: none;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-dark);
    text-transform: uppercase;
}

.main-navigation ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0; 
    padding: 0;
}

.main-navigation a {
    text-decoration: none;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    display: block; 
}

/* 3. HERO SECTION */
.hero-section {
    position: relative;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--header-height);
}

.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}

.hero-content {
    text-align: center;
    color: #fff;
    z-index: 1;
    width: 100%;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 40px;
    line-height: 1.2;
}

.hero-subtitle {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    color: var(--color-accent);
}

/* 4. SEARCH BOX */
.search-box-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    max-width: 900px;
    margin: 0 auto;
}

.search-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 180px;
    gap: 20px;
    align-items: center;
}

.search-item { text-align: left; }
.search-item label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 5px;
}

.search-item input {
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    color: #333;
}

.border-left { border-left: 1px solid #eee; padding-left: 20px; }

.btn-primary {
    background: var(--color-dark);
    color: #fff;
    border: none;
    padding: 0 30px;
    height: 50px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
}

/* =========================================
   FIX: ADMIN BAR CHE HEADER (Chỉ hiện khi Admin đăng nhập)
   ========================================= */
body.admin-bar .site-header {
    top: 32px; /* Đẩy header xuống 32px nếu có Admin bar */
}

/* Trên mobile thanh Admin bar to hơn (46px) */
@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* =========================================
   FIX: ẨN NÚT MOBILE & CĂN CHỈNH MENU
   ========================================= */

/* 1. Mặc định ẩn nút toggle đi (Chỉ hiện khi nào màn hình nhỏ) */
.menu-toggle {
    display: none;
}

/* 2. Đảm bảo Menu chính nằm thẳng hàng với Logo */
.main-navigation {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    height: 100%;
}

/* 3. Chỉ hiện nút Toggle trên màn hình điện thoại (Dưới 768px) */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Hiện lại nút trên mobile */
        background: transparent;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 0 10px;
    }
    
    /* Tạm thời ẩn menu ngang trên mobile để đỡ vỡ giao diện (sẽ xử lý sau) */
    .main-navigation ul {
        display: none; 
    }
}