/*
Theme Name: Lamat Automation Tailwind
Theme URI: https://lamgiahuyaomation.com/
Author: Antigravity AI
Description: High-performance Light Theme following LGH Brand Guidelines.
Version: 1.0.3
*/

/* 1. BRAND DESIGN TOKENS */
:root {
    --lgh-red: #6e0f1a;
    --lgh-red-hover: #8a1321;
    --lgh-gold-light: #fcf2d1;
    --text-heading: #6e0f1a;
    --text-body: #000000;
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --border-light: #f1f5f9;
}

html, body { 
    max-width: 100%;
    overflow-x: hidden; 
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    color: var(--text-body); 
    background: var(--bg-white); 
    line-height: 1.6;
    font-size: 12px !important; /* Đã thêm !important để chống giật */
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 36px !important; }
h2 { font-size: 32px !important; }
h3 { font-size: 28px !important; }
h4 { font-size: 24px !important; }
h5 { font-size: 20px !important; }
h6 { font-size: 16px !important; }
p { font-size: 12px !important; color: var(--text-body); margin-bottom: 1rem; }

h1, h2, h3, h4, h5, h6 { 
    color: var(--text-heading) !important; 
    line-height: 1.2 !important; 
    margin-bottom: 1.2rem !important; 
    font-weight: 900 !important; /* Đảm bảo luôn đậm nhất */
}

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* 2. HEADER 2 TẦNG (LIGHT MODE) */
header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--border-light); }

.top-bar { background: #fff; border-bottom: 1px solid var(--border-light); padding: 10px 0; font-size: 13px; font-weight: 500; color: #555; }
.top-bar .flex-between { display: flex; justify-content: space-between; align-items: center; }
.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 25px; }
.top-bar svg { width: 14px; height: 14px; color: var(--lgh-red); vertical-align: middle; margin-right: 6px; }

.main-bar { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; }
.logo-area { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo-box { width: 60px; height: 60px; background: var(--lgh-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; border-radius: 4px; }
.logo-text h2 { font-size: 26px; font-weight: 900; color: var(--lgh-red); line-height: 1; margin-bottom: 4px; }
.logo-text p { font-size: 13px; color: #777; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

nav.desktop-menu { display: flex; gap: 5px; }
nav.desktop-menu a { 
    text-decoration: none; 
    color: #444; 
    font-size: 13px; 
    font-weight: 700; 
    padding: 10px 14px;
    border-radius: 4px;
    transition: 0.3s; 
    white-space: nowrap; 
}
nav.desktop-menu a:hover { background: var(--lgh-gold-light); color: var(--lgh-red); }

.btn-cta { 
    background: var(--lgh-red); 
    color: #fff !important; 
    padding: 16px 32px; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 14px; 
    display: inline-block;
    transition: 0.3s; 
    box-shadow: 0 4px 15px rgba(110,15,26,0.2); 
}
.btn-cta:hover { background: var(--lgh-red-hover); transform: translateY(-2px); shadow: 0 6px 20px rgba(110,15,26,0.3); }

/* 3. HERO SECTION (FULL WHITE) */
.hero-section { background: #fff; padding: 100px 0; color: var(--text-body); position: relative; border-bottom: 1px solid var(--border-light); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-content h1 { line-height: 1.15; margin-bottom: 30px; color: var(--text-heading); }
.hero-content p { color: var(--text-body); margin-bottom: 40px; max-width: 550px; }
.hero-image { background: var(--bg-light); border: 1px solid var(--border-light); aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; position: relative; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    nav.desktop-menu, .top-bar, .lg-only { display: none !important; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-content h1 { font-size: 36px; }
    .hero-content p { margin: 0 auto 30px; }
}