/* ===== GIA SƯ HOA NGỮ TÂN AN - Frontend ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; color:#1f2937; line-height:1.65; background:#fff; margin-top: 115px; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1140px; margin:0 auto; padding:0 18px; }
/* ===== TOP BAR - Chứa logo + tên + địa chỉ + FB ===== */
.topbar { 
    background: linear-gradient(90deg, #1e3a8a, #2563eb); 
    color: #fff; 
    font-size: 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    width: 100%;
}
.topbar .container { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:8px 18px; 
    flex-wrap:wrap; 
    gap:8px; 
}
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar .brand img {
    height: 70px;
    width: auto;
    border-radius: 8px;
}
.topbar .brand .info h1 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.topbar .brand .info p {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin: 0;
}
.topbar a { color:#fff; }
.topbar .right a { margin-left:14px; font-weight: 600; }
/* ===== HEADER / NAV - Chỉ chứa menu ===== */
header.site { 
    background: #fff; 
    box-shadow: 0 1px 8px rgba(0,0,0,.06); 
    position: fixed; 
    top: 86px;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
}
header.site .container { 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    padding:10px 18px; 
}
nav.main ul { list-style:none; display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
nav.main a { padding:10px 14px; font-weight:600; font-size:15px; color:#1f2937; border-radius:6px; transition:.2s; }
nav.main a:hover, nav.main a.active { color:#1d4ed8; background:#eff6ff; }
.nav-toggle { display:none; background:none; border:none; font-size:26px; cursor:pointer; color:#1e3a8a; }
/* ===== HERO ===== */
.hero { 
    background-image: url('hero-bg-new.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fdfaf5;
    padding: 120px 20px;
    text-align: center;
    position: relative;
    min-height: 600px;
}
.hero .badge { display:inline-block; background:#dcfce7; color:#166534; padding:6px 16px; border-radius:20px; font-size:14px; font-weight:600; margin-bottom:18px; }
.hero h1 { font-size:42px; color:#1f2937; margin-bottom:14px; }
.hero h1 span { color:#16a34a; }
.hero p.sub { font-size:18px; color:#4b5563; max-width:640px; margin:0 auto 26px; }
.hero .btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* ===== BUTTONS ===== */
.btn { display:inline-block; padding:13px 26px; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; border:none; transition:.2s; }
.btn-primary { background:#ea580c; color:#fff; }
.btn-primary:hover { background:#c2410c; }
.btn-outline { background:#fff; color:#1d4ed8; border:2px solid #1d4ed8; }
.btn-outline:hover { background:#eff6ff; }
/* ===== SECTION ===== */
section.block { padding:54px 0; padding-top:80px; }
section.block.alt { background:#f9fafb; }
.sec-tag { display:inline-block; background:#eff6ff; color:#1d4ed8; padding:5px 16px; border-radius:20px; font-size:14px; font-weight:600; margin-bottom:12px; }
.sec-head { text-align:center; margin-bottom:38px; }
.sec-head h2 { font-size:32px; color:#1f2937; }
.sec-head h2 span { color:#1d4ed8; }
.sec-head p { color:#6b7280; margin-top:8px; }
/* ===== GRID CARDS ===== */
.grid { display:grid; gap:22px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.card { background:#fff; border:1px solid #eef0f3; border-radius:12px; overflow:hidden; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.card .body { padding:20px; }
.card .cat { font-size:13px; color:#1d4ed8; font-weight:600; }
.card h3 { font-size:18px; margin:8px 0; color:#1f2937; }
.card p { color:#6b7280; font-size:14px; }
.card .more { display:inline-block; margin-top:12px; color:#ea580c; font-weight:600; font-size:14px; }
.card img.thumb { width:100%; height:170px; object-fit:cover; background:#f3f4f6; }
/* ===== PAGE CONTENT (trang tĩnh) ===== */
.page-hero { display: none !important; }
.content-box { background:#fff; padding:34px; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.06); margin:30px 0; }
.content-box h2 { color:#1d4ed8; margin:18px 0 10px; }
.content-box h3 { color:#1e3a8a; margin:16px 0 8px; }
.content-box p { margin:10px 0; }
.content-box ul, .content-box ol { margin:10px 0 10px 22px; }
.content-box table { border-collapse:collapse; width:100%; margin:14px 0; }
.content-box table td, .content-box table th { border:1px solid #e5e7eb; padding:8px 10px; }
/* ===== CONTACT ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.contact-info p { margin:10px 0; }
.form-field { margin-bottom:14px; }
.form-field label { display:block; font-weight:600; margin-bottom:5px; font-size:14px; }
.form-field input, .form-field textarea { width:100%; padding:11px 13px; border:1px solid #d1d5db; border-radius:7px; font-family:inherit; font-size:14px; }
/* ===== VIDEO ===== */
.video-wrap { position:relative; padding-bottom:56.25%; height:0; border-radius:10px; overflow:hidden; }
.video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
/* ===== FOOTER ===== */
footer.site { background:#111827; color:#cbd5e1; padding:44px 0 20px; margin-top:40px; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }
footer.site h4 { color:#fff; margin-bottom:14px; font-size:16px; }
footer.site a { color:#cbd5e1; }
footer.site a:hover { color:#fff; }
footer.site ul { list-style:none; }
footer.site ul li { margin:7px 0; font-size:14px; }
footer.site .copy { text-align:center; border-top:1px solid #1f2937; margin-top:30px; padding-top:18px; font-size:13px; color:#9ca3af; }
/* ===== RESPONSIVE ===== */
@media (max-width:860px){
    .topbar .brand img {
        height: 50px;
    }
    .topbar .brand .info h1 {
        font-size: 16px;
    }
    .topbar .brand .info p {
        display: none;
    }
    .topbar .right {
        display: none;
    }
    header.site {
        top: 66px;
    }
    nav.main ul { display:flex; flex-direction:row; flex-wrap:wrap; gap:2px; }
    nav.main a { padding:8px 10px; font-size:12px; }
    .nav-toggle { display:none; }
    .grid-3, .grid-2, .contact-grid, footer.site .cols { grid-template-columns:1fr; }
    .hero h1 { font-size:28px; }
}