/* ========================================= */
/* 1. CORE VARIABLES & RESET                 */
/* ========================================= */
:root {
    --color-primary: #111111; 
    --color-secondary: #666666;
    --color-accent: #b8860b; /* Vàng đồng */
    --color-accent-hover: #d4a017;
    --color-bg-light: #ffffff;
    --color-bg-offwhite: #f8f8f8;
    --color-bg-dark: #1a1a1a;
    --color-text-light: #ffffff;      
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    
    --spacing-container: 5%;
    --max-width: 1100px;
    --header-height: 80px;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: var(--font-body); 
    color: var(--color-secondary); 
    line-height: 1.7; 
    background-color: var(--color-bg-light); 
    font-size: 16px; 
    overflow-x: hidden; 
}

h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); line-height: 1.2; margin-bottom: 1rem; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -1px; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.5rem; }

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-container); } 

/* Buttons */
.btn {
    display: inline-block; background-color: var(--color-accent); color: white;
    padding: 0.9rem 2rem; border: none; border-radius: 2px; cursor: pointer;
    font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.3s ease; position: relative; overflow: hidden;
}
.btn:hover { background-color: var(--color-accent-hover); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(184, 134, 11, 0.3); }

.btn-outline { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: var(--color-text-light); }

/* ========================================= */
/* 2. HEADER & NAVIGATION (FULL FIXED)       */
/* ========================================= */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 var(--spacing-container); height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.98);
    position: sticky; top: 0; z-index: 999;
    transition: box-shadow 0.3s; border-bottom: 1px solid #eee;
}
header.scrolled { box-shadow: 0 5px 20px rgba(0,0,0,0.05); }

.logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 900; color: var(--color-primary); letter-spacing: 1px; z-index: 1001; }
.logo span { color: var(--color-accent); }

/* Hamburger Icon */
.hamburger { display: none; cursor: pointer; z-index: 1001; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: var(--color-primary); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Search Trigger Icon */
.search-trigger { cursor: pointer; font-size: 1.2rem; color: var(--color-primary); margin-left: 20px; z-index: 1001; }

/* GLOBAL MENU RESET */
nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
nav ul li { position: relative; }
/* Mặc định ẩn nút JS toggle (chỉ hiện mobile) */
.dropdown-toggle { display: none !important; }

/* --- 2.1 DESKTOP STYLES (Min Width 901px) --- */
@media (min-width: 901px) {
    nav ul li { margin-left: 30px; padding: 10px 0; }
    nav ul li a {
        text-decoration: none; color: var(--color-primary); font-weight: 600;
        font-size: 0.9rem; transition: 0.3s; display: block;
        text-transform: uppercase; letter-spacing: 0.5px; position: relative;
    }
    
    /* Hover Effect */
    nav ul li > a::after {
        content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0;
        background-color: var(--color-accent); transition: width 0.3s;
    }
    nav ul li:hover > a::after { width: 100%; }
    nav ul li:hover > a { color: var(--color-accent); }

    /* Level 2 Dropdown */
    nav ul li ul.sub-menu {
        position: absolute; top: 100%; left: 0; width: 220px;
        background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 10px 0; border-top: 3px solid var(--color-accent);
        opacity: 0; visibility: hidden; transform: translateY(10px);
        transition: all 0.3s ease; z-index: 999; display: block;
    }
    nav ul li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

    nav ul li ul.sub-menu li { margin: 0; padding: 0; display: block; }
    nav ul li ul.sub-menu li a {
        padding: 10px 20px; border-bottom: 1px solid #f5f5f5; font-size: 0.85rem; text-transform: none;
    }
    nav ul li ul.sub-menu li a::after { display: none; }
    nav ul li ul.sub-menu li a:hover { background-color: #f9f9f9; padding-left: 25px; color: var(--color-accent); }

    /* Level 3 Flyout */
    nav ul li ul.sub-menu li ul.sub-menu {
        top: 0; left: 100%; margin-top: -3px;
        opacity: 0; visibility: hidden; transform: translateX(10px);
    }
    nav ul li ul.sub-menu li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateX(0); }

    /* Desktop CSS Arrows */
    .menu-item-has-children > a::before { content: '\f107'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 5px; font-size: 0.8em; float: right; }
    nav ul li ul.sub-menu li.menu-item-has-children > a::before { content: '\f105'; }
}

/* --- 2.2 MOBILE STYLES (Max Width 900px) --- */
@media (max-width: 900px) {
    .hamburger { display: block; }

    /* Mobile Nav Container */
    nav {
        position: fixed; top: var(--header-height); left: -100%;
        width: 100%; height: calc(100vh - var(--header-height));
        background-color: #ffffff; /* Nền trắng */
        transition: left 0.4s ease-in-out;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        overflow-y: auto; padding-top: 0; z-index: 998;
        
        /* Force Display */
        display: block !important; opacity: 1 !important; visibility: visible !important;
    }
    nav.active { left: 0 !important; } /* JS Toggle class active để trượt ra */

    /* Menu Items */
    nav ul { flex-direction: column; align-items: flex-start; width: 100%; padding-bottom: 50px; }
    nav ul li { width: 100%; margin: 0; padding: 0; border-bottom: 1px solid #f0f0f0; }
    
    nav ul li a {
        padding: 15px 20px; width: 100%; display: block; padding-right: 60px;
        color: #111111 !important; /* Force Black Text */
        font-weight: 600; font-size: 1rem; text-align: left;
    }
    nav ul li a:hover { color: var(--color-accent) !important; background: #f9f9f9; }

    /* JS Toggle Button (Mũi tên) */
    .dropdown-toggle {
        display: flex !important; position: absolute; right: 0; top: 0;
        width: 60px; height: 56px; align-items: center; justify-content: center;
        cursor: pointer; color: #333 !important; border-left: 1px solid #eee; z-index: 10;
    }
    .dropdown-toggle:hover { background-color: var(--color-accent); color: white !important; }

    /* Hide Desktop CSS Arrows */
    .menu-item-has-children > a::before, .menu-item-has-children > a::after { display: none !important; }

    /* Submenus (Accordion) */
    nav ul li ul.sub-menu, nav ul li ul.sub-menu li ul.sub-menu {
        position: static; width: 100%; box-shadow: none; border: none;
        background: #f7f7f7; opacity: 1; visibility: visible; transform: none; padding: 0;
        display: none; /* Mặc định ẩn */
    }
    nav ul li.submenu-open > ul.sub-menu { display: block !important; } /* Hiện khi có class JS */

    nav ul li ul.sub-menu li a { padding-left: 40px !important; font-size: 0.95rem; font-weight: 500; color: #555 !important; }
    nav ul li ul.sub-menu li ul.sub-menu li a { padding-left: 60px !important; color: var(--color-accent) !important; }
}

/* ========================================= */
/* 3. FULL SCREEN LIVE SEARCH                */
/* ========================================= */
.full-screen-search {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(26, 26, 26, 0.95); backdrop-filter: blur(5px);
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.4s ease;
}
.full-screen-search.active { opacity: 1; visibility: visible; }

.search-inner-wrapper {
    width: 100%; max-width: 800px; padding: 0 20px;
    transition: all 0.5s ease-in-out; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.search-inner-wrapper.has-results { top: 15%; transform: translate(-50%, 0); }
/* Sửa lỗi chữ trắng/không thấy chữ trong ô Search */
.full-screen-search input {
    width: 100%; 
    background: transparent !important; /* Đảm bảo nền trong suốt */
    border: none;
    color: #ffffff !important; /* Ép màu chữ trắng tinh */
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem); 
    font-weight: 700;
    padding: 10px 50px 10px 0; 
    outline: none; 
    border-bottom: 2px solid #555;
    display: block;
}

/* Quan trọng: Phải nhìn thấy cả chữ khi đang gõ và chữ gợi ý (Placeholder) */
.full-screen-search input::placeholder {
    color: rgba(255, 255, 255, 0.3); /* Màu chữ gợi ý mờ đi */
}

/* Đảm bảo khi có kết quả, nền của container không đè lên chữ */
.search-inner-wrapper {
    z-index: 100000;
}

.full-screen-search input:focus { border-bottom-color: var(--color-accent); }
.full-screen-search button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-accent); font-size: 2rem; cursor: pointer; }

.search-note { color: #666; margin-top: 2rem; font-size: 0.9rem; }
.close-search { position: absolute; top: 40px; right: 40px; font-size: 3rem; color: #666; cursor: pointer; transition: 0.3s; }
.close-search:hover { color: white; transform: rotate(90deg); }

/* Live Results */
.search-results-container { margin-top: 30px; max-height: 60vh; overflow-y: auto; padding-right: 10px; }
.live-search-item { display: flex; align-items: center; background: rgba(255, 255, 255, 0.05); padding: 15px; margin-bottom: 15px; border-radius: 4px; transition: 0.3s; color: white; text-decoration: none; }
.live-search-item:hover { background: rgba(255, 255, 255, 0.1); border: 1px solid var(--color-accent); }
.live-thumb { width: 60px; height: 60px; flex-shrink: 0; margin-right: 15px; border-radius: 4px; overflow: hidden; background: #333; }
.live-thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-info h4 { margin: 0 0 5px; color: white; font-size: 1.1rem; font-weight: 600; }
.live-type { font-size: 0.75rem; text-transform: uppercase; color: var(--color-accent); font-weight: 700; }
.live-search-view-all { display: block; text-align: center; color: var(--color-accent); font-weight: 700; padding: 15px; text-transform: uppercase; font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.1); }
.live-search-view-all:hover { color: white; }
.live-search-empty { color: #ccc; font-size: 1.2rem; text-align: center; margin-top: 20px; }

/* ========================================= */
/* 4. HOME & BLOG SECTIONS                   */
/* ========================================= */
.hero { background-color: var(--color-bg-dark); color: var(--color-text-light); padding: 5rem 0 4rem; text-align: center; position: relative; }
.hero h1, .hero p { color: var(--color-text-light) !important; }
.hero-label { color: var(--color-accent); font-size: 0.9rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; display: block; }
.hero p { font-size: 1.1rem; margin-bottom: 2.5rem; font-weight: 300; opacity: 0.9; }
.hero-image-wrapper { margin-top: 3rem; box-shadow: 0 20px 40px rgba(0,0,0,0.5); border: 1px solid rgba(184, 134, 11, 0.5); overflow: hidden; border-radius: 4px; position: relative; }
.hero-image-wrapper img { width: 100%; transition: transform 0.7s ease; }
.hero-image-wrapper:hover img { transform: scale(1.03); }

/* Categories */
.categories { padding: 4rem 0; background-color: var(--color-bg-offwhite); border-bottom: 2px solid var(--color-accent); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-card { background: white; padding: 2.5rem 2rem; text-align: center; border: 1px solid #eee; transition: transform 0.3s, box-shadow 0.3s; }
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--color-accent); }
.cat-card i { font-size: 2rem; color: var(--color-accent); margin-bottom: 1.5rem; }
.cat-card h3 { font-size: 1.3rem; letter-spacing: 0.5px; text-transform: uppercase; }
.cat-card a { font-weight: 700; font-size: 0.9rem; color: var(--color-primary); margin-top: 1rem; display: inline-block; }

/* Journal */
.journal { padding: 5rem 0; }
.section-header { text-align: center; margin-bottom: 4rem; position: relative; }
.section-header::after { content: ''; width: 60px; height: 3px; background: var(--color-accent); display: block; margin: 1.5rem auto 0; }
.ad-banner { background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); border: 1px solid #ddd; padding: 2rem; text-align: center; margin: 3rem 0; position: relative; }
.ad-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%); background: var(--color-accent); color: white; padding: 2px 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }

/* Blog List Layout */
.post-list-layout { display: flex; flex-direction: column; gap: 40px; max-width: 900px; margin: 0 auto; }
.post-list-item { display: flex; align-items: stretch; background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.post-list-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--color-accent); }
.post-list-thumb { flex: 0 0 35%; max-width: 35%; position: relative; overflow: hidden; }
.post-list-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-list-item:hover .post-list-thumb img { transform: scale(1.05); }
.post-list-content { flex: 1; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.post-meta-top { display: flex; gap: 15px; margin-bottom: 0.8rem; font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.post-cat { color: var(--color-accent); }
.post-title { font-size: 1.5rem; margin-bottom: 1rem; line-height: 1.3; transition: color 0.2s; }
.post-list-item:hover .post-title { color: var(--color-accent); }
.post-excerpt { font-size: 1rem; color: #555; margin-bottom: 1.5rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-link { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; color: var(--color-primary); margin-top: auto; display: inline-flex; align-items: center; gap: 5px; }
.read-more-link:hover { gap: 10px; color: var(--color-accent); }

/* Archive Header */
.archive-header { padding: 4rem 0 2rem; text-align: center; max-width: 850px; margin: 0 auto; }
.cat-label { font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); font-weight: 700; display: block; margin-bottom: 1rem; }
.cat-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 1rem; color: var(--color-primary); }
.cat-desc { font-size: 1.1rem; color: #666; max-width: 600px; margin: 0 auto; }

/* Home Article Item (Backup for front-page) */
.article-item { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid #eee; align-items: flex-start; }
.article-item:last-of-type { border-bottom: none; }
.article-meta { font-size: 0.8rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1px; display: flex; flex-direction: column; gap: 5px; }
.article-meta .category { color: var(--color-accent); }
.article-body h3 { font-size: 1.6rem; margin-bottom: 0.8rem; transition: color 0.2s; }
.article-item:hover .article-body h3 { color: var(--color-accent); }
.article-desc { margin-bottom: 1rem; font-size: 1rem; color: #555; }
.read-more { font-weight: 700; font-size: 0.9rem; border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; }

/* Filter Bar & Pagination */
.filter-bar { display: flex; justify-content: space-between; padding: 1.5rem 0; border-bottom: 1px solid #eee; margin-bottom: 2rem; font-size: 0.9rem; }
.filter-options a { margin-left: 15px; color: #999; }
.filter-options a.active { color: var(--color-primary); font-weight: 700; border-bottom: 2px solid var(--color-accent); }
.pagination { text-align: center; margin-top: 4rem; }
.pagination .page-numbers { display: inline-block; width: 40px; height: 40px; line-height: 40px; border: 1px solid #eee; margin: 0 5px; border-radius: 50%; font-weight: 700; }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background-color: var(--color-primary); color: white; border-color: var(--color-primary); }

@media (max-width: 900px) {
    .cat-grid { grid-template-columns: 1fr; }
    .post-list-item { flex-direction: column; }
    .post-list-thumb { flex: 0 0 250px; max-width: 100%; height: 250px; }
    .post-list-content { padding: 1.5rem; }
    .article-item { grid-template-columns: 1fr; gap: 0.5rem; }
    .article-meta { flex-direction: row; margin-bottom: 0.5rem; }
}

/* ========================================= */
/* 5. ABOUT, CONTACT & PROJECT               */
/* ========================================= */
/* About */
.about-hero { padding: 8rem 0 6rem; text-align: center; background-color: #fff; }
.about-label { font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); font-weight: 700; display: block; margin-bottom: 1.5rem; }
.about-title { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 900px; margin: 0 auto 2rem; line-height: 1.2; color: var(--color-primary); }
.about-intro { font-size: 1.2rem; max-width: 700px; margin: 0 auto; color: #666; font-weight: 300; }

.story-section { padding: 5rem 0; background-color: var(--color-bg-offwhite); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-img-wrapper { position: relative; z-index: 1; }
.story-img-wrapper img { width: 100%; border-radius: 2px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; z-index: 2; }
.story-img-wrapper::before { content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%; border: 2px solid var(--color-accent); z-index: 1; pointer-events: none; }
.story-content h3 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--color-primary); }
.story-text { text-align: justify; color: #555; font-size: 1.05rem; }

.stats-section { background-color: var(--color-primary); color: white; padding: 5rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-number { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; color: var(--color-accent); margin-bottom: 0.5rem; display: block; }
.stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #999; }

.team-section { padding: 6rem 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.team-card { text-align: center; transition: transform 0.3s; }
.team-card:hover { transform: translateY(-10px); }
.team-img { width: 100%; height: 350px; object-fit: cover; margin-bottom: 1.5rem; filter: grayscale(100%); transition: 0.5s; border-radius: 4px; }
.team-card:hover .team-img { filter: grayscale(0%); }
.team-name { font-size: 1.2rem; margin-bottom: 0.3rem; font-weight: 700; }
.team-role { font-size: 0.85rem; color: var(--color-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 1rem; display: block; }
.team-bio { font-size: 0.9rem; color: #666; line-height: 1.6; }

.values-section { padding: 5rem 0; background-color: #f4f4f4; border-top: 1px solid #ddd; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.value-card { padding: 2rem; background: white; border: 1px solid #eee; transition: 0.3s; text-align: center; }
.value-card:hover { border-color: var(--color-accent); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.value-icon { font-size: 2rem; color: var(--color-accent); margin-bottom: 1.5rem; }
.value-card h4 { font-size: 1.1rem; margin-bottom: 1rem; font-weight: 700; text-transform: uppercase; }

@media (max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; margin-bottom: 2rem; }
    .story-img-wrapper { margin-bottom: 2rem; } .story-img-wrapper::before { top: -10px; left: -10px; }
    .team-grid, .values-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Contact */
.page-header { background-color: var(--color-primary); color: white; padding: 6rem 0 4rem; text-align: center; }
.page-header h1 { color: white; font-size: 3rem; margin-bottom: 1rem; }
.page-header p { color: #ccc; max-width: 600px; margin: 0 auto; font-size: 1.1rem; }
.contact-section { padding: 5rem 0; background-color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
.contact-info h2 { font-size: 2rem; margin-bottom: 1.5rem; }
.info-item { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 2rem; }
.info-icon { width: 50px; height: 50px; background: var(--color-bg-offwhite); border: 1px solid #eee; display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 1.2rem; flex-shrink: 0; border-radius: 50%; }
.contact-form-wrapper { background: var(--color-bg-offwhite); padding: 3rem; border: 1px solid #eee; border-top: 4px solid var(--color-accent); border-radius: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 1.5rem; }
.form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; background: white; font-family: var(--font-body); font-size: 1rem; outline: none; border-radius: 2px; transition: 0.3s; }
.form-control:focus { border-color: var(--color-accent); }
textarea.form-control { resize: vertical; min-height: 120px; }
.btn-submit { background-color: var(--color-accent); color: white; border: none; padding: 1rem 2.5rem; font-weight: 700; text-transform: uppercase; cursor: pointer; width: 100%; letter-spacing: 1px; border-radius: 2px; transition: 0.3s; }
.btn-submit:hover { background-color: var(--color-primary); }
.map-section { height: 450px; background-color: #eee; width: 100%; }
.map-section iframe, .map-section img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); }


@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* Project / Portfolio */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.project-card { display: block; position: relative; }
.project-thumb { position: relative; overflow: hidden; border-radius: 4px; margin-bottom: 1rem; height: 350px; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.project-card:hover .project-thumb img { transform: scale(1.1); }
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.project-card:hover .project-overlay { opacity: 1; }
.project-view-btn { border: 1px solid #fff; color: #fff; padding: 10px 20px; text-transform: uppercase; font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; }
.project-title { font-size: 1.5rem; margin-bottom: 0.2rem; transition: 0.3s; }
.project-card:hover .project-title { color: var(--color-accent); }
.project-cat { color: #888; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

.project-hero { padding: 4rem 0 2rem; text-align: center; }
.project-hero-title { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 0; }
.project-cover-img img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 4rem; }
.project-content-wrapper { display: grid; grid-template-columns: 300px 1fr; gap: 60px; margin-bottom: 5rem; }
.project-meta-box { background: #f9f9f9; padding: 2rem; border-top: 3px solid var(--color-accent); position: sticky; top: 100px; }
.meta-heading { font-size: 1.1rem; text-transform: uppercase; margin-bottom: 1.5rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.meta-list { list-style: none; padding: 0; }
.meta-list li { margin-bottom: 1rem; font-size: 0.95rem; }
.meta-list li strong { display: block; color: var(--color-primary); }
.meta-list li span { color: #666; }
.project-nav-container { padding: 2rem 0; border-top: 1px solid #eee; background: #fdfdfd; }
.project-nav-container a { font-weight: 700; color: var(--color-primary); }
.project-nav-container a:hover { color: var(--color-accent); }

@media (max-width: 900px) { .project-grid { grid-template-columns: 1fr; } .project-content-wrapper { grid-template-columns: 1fr; } .project-meta-box { position: static; margin-bottom: 3rem; } .project-sidebar { order: -1; } }

/* ========================================= */
/* 6. EXTRAS (Footer, News, Tools)           */
/* ========================================= */
.newsletter { background-color: var(--color-primary); color: white; padding: 5rem 0; text-align: center; }
.newsletter h2 { color: white; margin-bottom: 1rem; }
.newsletter p { color: #999; margin-bottom: 2rem; max-width: 600px; margin: 0 auto 2rem; }
.newsletter .wpcf7-form { display: flex; flex-direction: column; align-items: center; }
.newsletter .wpcf7 p { width: 100%; margin-bottom: 0; display: flex; justify-content: center; gap: 10px; }
@media (min-width: 769px) { .newsletter .wpcf7 p { flex-direction: row; max-width: 500px; margin: 0 auto; } }
@media (max-width: 768px) { .newsletter .wpcf7 p { flex-direction: column; } .newsletter .wpcf7-form-control-wrap { width: 100%; margin-bottom: 10px; } }
.newsletter input[type="email"], .newsletter input[type="text"] { flex: 1; padding: 1rem; border: 1px solid #444; background: #222; color: white; font-family: 'Inter', sans-serif; outline: none; width: 100%; }
.newsletter input[type="submit"] { background-color: var(--color-accent); color: white; padding: 1rem 2rem; border: none; border-radius: 2px; cursor: pointer; font-weight: 700; text-transform: uppercase; transition: 0.3s; width: auto; }
.newsletter input[type="submit"]:hover { background-color: #d4a017; transform: translateY(-2px); }

footer { background-color: #0f0f0f; color: #888; padding: 4rem 0 2rem; font-size: 0.9rem; border-top: 3px solid var(--color-accent); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 3rem; }
.footer-col h4 { color: white; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 1.5rem; }
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col a:hover { color: var(--color-accent); padding-left: 5px; }
.copyright { text-align: center; border-top: 1px solid #222; padding-top: 2rem; font-size: 0.85rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } }

#scrollTopBtn { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 9999; border: none; background-color: var(--color-accent); color: white; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; font-size: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.3s ease; align-items: center; justify-content: center; }
#scrollTopBtn:hover { background-color: var(--color-primary); transform: translateY(-5px); }

.sticky-share-bar { position: fixed; top: 50%; left: 20px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 99; }
.share-icon { width: 40px; height: 40px; background: #fff; border: 1px solid #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #333; transition: 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.share-icon:hover { background: var(--color-accent); color: white; }
@media (max-width: 900px) { .sticky-share-bar { display: none; } }

/* 404 & Search */
.error-page-section { padding: 8rem 0; text-align: center; background-color: #f9f9f9; min-height: 60vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.error-code { font-size: clamp(6rem, 10vw, 10rem); font-weight: 900; line-height: 1; color: var(--color-accent); opacity: 0.2; margin-bottom: 0; }
.error-title { font-size: 2.5rem; margin-top: -20px; margin-bottom: 1rem; color: var(--color-primary); position: relative; z-index: 2; }
.error-desc { font-size: 1.1rem; color: #666; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.error-search-box { max-width: 500px; margin: 0 auto; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.no-js .reveal {opacity: 1;    transform: none;}
.delay-100 { transition-delay: 0.1s; } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
/* ========================================= */
/* FIX: SINGLE POST CONTENT (RICH TEXT)      */
/* ========================================= */

/* 1. Khôi phục danh sách (Bullet points) */
/* (Mặc định bị reset mất dấu chấm, giờ phải bật lại riêng cho bài viết) */
.article-content ul {
    list-style: disc !important; /* Dấu chấm tròn */
    padding-left: 20px;
    margin-bottom: 1.5rem;
}
.article-content ol {
    list-style: decimal !important; /* Số 1, 2, 3 */
    padding-left: 20px;
    margin-bottom: 1.5rem;
}
.article-content li { margin-bottom: 0.5rem; }

/* 2. Trích dẫn (Blockquote) sang trọng */
.article-content blockquote {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--color-primary);
    margin: 2.5rem 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid var(--color-accent);
    background-color: #fafafa; /* Nền xám nhẹ làm nổi bật */
    border-radius: 0 4px 4px 0;
}

/* 3. Các thẻ Heading con (H3, H4) trong bài */
.article-content h3 {
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    position: relative;
    padding-left: 15px;
}
/* Thêm gạch dọc nhỏ trước H3 cho đẹp */
.article-content h3::before {
    content: ''; position: absolute; left: 0; top: 5px; bottom: 5px;
    width: 3px; background-color: var(--color-accent);
}

.article-content h4 {
    font-size: 1.2rem;
    margin-top: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
}

/* 4. Dropcap (Chữ cái đầu to - Tạp chí) */
/* Cách dùng: <p class="dropcap">Nội dung...</p> */
.dropcap::first-letter {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    float: left;
    line-height: 0.8;
    padding-right: 15px;
    padding-top: 5px;
    color: var(--color-accent);
    font-weight: 900;
}

/* 5. Highlight Box (Hộp tóm tắt/Lưu ý) */
/* Cách dùng: <div class="highlight-box">...</div> */
.highlight-box {
    background: #fdfbfb;
    padding: 2rem;
    border: 1px solid #eee;
    border-top: 3px solid var(--color-accent); /* Viền màu trên đầu */
    border-radius: 4px;
    margin: 2.5rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.highlight-box h4 { margin-top: 0; color: var(--color-accent); }
.highlight-box ul { margin-bottom: 0; }

/* 6. Căn chỉnh ảnh WordPress (Alignments) */
/* WP tự sinh ra các class này khi bạn chọn căn trái/phải/giữa */
.aligncenter { display: block; margin: 2rem auto; }
.alignleft { float: left; margin: 0 1.5rem 1.5rem 0; }
.alignright { float: right; margin: 0 0 1.5rem 1.5rem; }
.wp-caption { max-width: 100%; margin-bottom: 1.5rem; text-align: center; }
.wp-caption-text { font-size: 0.85rem; color: #888; font-style: italic; margin-top: 0.5rem; }

/* Responsive ảnh trong bài */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* ========================================= */
/* BEAUTIFY SINGLE POST (TẠP CHÍ STYLE)      */
/* ========================================= */

/* 1. Header Bài Viết */
.article-header { padding: 4rem 0 2rem; text-align: center; }
.article-cat-label a {
    color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem;
    border: 1px solid var(--color-accent); padding: 5px 15px; border-radius: 20px; display: inline-block; margin-bottom: 1.5rem;
    transition: 0.3s;
}
.article-cat-label a:hover { background: var(--color-accent); color: white; }

.article-title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; margin-bottom: 1.5rem; color: #111; }

.meta-data { 
    display: flex; justify-content: center; align-items: center; gap: 15px; color: #666; font-size: 0.95rem; 
    border-bottom: 1px solid #eee; padding-bottom: 2rem; max-width: 600px; margin: 0 auto;
}
.meta-author { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #111; }
.meta-author img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.meta-sep { color: #ccc; }

/* 2. Ảnh Đại Diện */
.featured-image { margin: 2rem 0 4rem; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.featured-image img { width: 100%; height: auto; display: block; }

/* ========================================= */
/* 3. ARTICLE CONTENT (ĐÃ CHỈNH RỘNG HƠN)   */
/* ========================================= */

/* Header bài viết gọn gàng hơn */
.article-header { 
    padding: 3rem 0 2rem; /* Giảm padding trên dưới */
    text-align: center; 
    max-width: 1000px; /* Tăng độ rộng header */
    margin: 0 auto; 
}

.article-title { 
    font-size: clamp(2rem, 4vw, 3.2rem); /* Chữ to đậm đà */
    line-height: 1.2; 
    margin-bottom: 1rem; 
    color: #111; 
}

.meta-data { 
    display: flex; justify-content: center; align-items: center; gap: 20px; 
    color: #555; font-size: 1rem; 
    border-bottom: 1px solid #eee; padding-bottom: 1.5rem; 
    max-width: 800px; margin: 0 auto;
}

/* Ảnh đại diện nổi bật */
.featured-image { 
    margin: 2rem auto 3rem; 
    width: 100%; 
    max-width: 1100px; /* Giới hạn chiều rộng ảnh cho cân đối */
    border-radius: 4px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}
.featured-image img { width: 100%; height: auto; display: block; }

/* CONTAINER NỘI DUNG CHÍNH (QUAN TRỌNG NHẤT) */
.article-container { 
    max-width: 960px; /* Tăng từ 850px -> 960px để nội dung rộng ra, bớt dài */
    margin: 0 auto; 
    padding-bottom: 3rem; 
    position: relative;
}

/* Cỡ chữ to hơn để hợp với web khổ lớn */
.article-content p { 
    font-size: 1.2rem; /* Tăng size chữ (19px) */
    line-height: 1.7; 
    margin-bottom: 1.8rem; 
    color: #222; 
    text-align: justify; 
}

.article-content h2 { 
    font-size: 2.2rem; /* Tiêu đề con to hơn */
    margin-top: 3rem; 
    margin-bottom: 1.2rem; 
    color: var(--color-primary);
    font-weight: 800;
}

.article-content h3 { 
    font-size: 1.6rem; 
    margin-top: 2.5rem; 
    margin-bottom: 1rem; 
    font-weight: 700;
}

/* Dropcap & Sapo */
.article-sapo { 
    font-size: 1.35rem; 
    line-height: 1.6; 
    color: #333; 
    font-weight: 600; 
    margin-bottom: 2.5rem; 
    border-left: 5px solid var(--color-accent); 
    padding-left: 25px; 
}

/* Highlight Box (Làm gọn lại) */
.highlight-box {
    background: #fcfcfc;
    padding: 2rem;
    border: 1px solid #e5e5e5;
    border-left: 4px solid var(--color-accent);
    margin: 2.5rem 0;
}

/* Author Box */
/* Layout tổng thể của Author Box */
.author-box {
    display: flex; /* Đưa ảnh và chữ nằm ngang hàng */
    align-items: flex-start; /* Căn đỉnh */
    gap: 30px; /* Khoảng cách giữa ảnh và nội dung chữ */
    padding: 30px;
    background: #fdfdfd;
    border: 1px solid #eee;
    margin-top: 40px;
}

/* Fix kích thước Avatar */
.author-avatar {
    flex-shrink: 0; /* Không cho ảnh bị bóp nhỏ */
}

.author-avatar img {
    width: 150px !important; /* Tăng size từ 100px lên 150px hoặc 180px tùy ý */
    height: 150px !important;
    border-radius: 8px; /* Bo góc nhẹ cho hiện đại hoặc 50% nếu muốn hình tròn */
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Nội dung bên phải */
.author-info {
    flex-grow: 1;
}

.author-info h4 {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Responsive cho Mobile */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column; /* Mobile thì ảnh nằm trên chữ nằm dưới */
        align-items: center;
        text-align: center;
    }
    .author-avatar img {
        width: 120px !important;
        height: 120px !important;
    }
}
.author-bio-content blockquote {
    border-left: 3px solid #d4a017; /* Màu vàng thương hiệu */
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    font-size: 16px;
    color: #444;
}
/* ========================================= */
/* 4. RELATED POSTS (FIX LỖI ẢNH TO ĐÙNG)    */
/* ========================================= */
.related-section { 
    background-color: #fff; 
    padding-top: 3rem; 
    padding-bottom: 5rem;
    border-top: 2px solid #f0f0f0; 
    margin-top: 2rem; 
}

.related-heading { 
    text-align: center; 
    font-size: 1.8rem; 
    margin-bottom: 2.5rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}
.related-heading::after { 
    content: ''; display: block; 
    width: 50px; height: 3px; 
    background: var(--color-accent); 
    margin: 1rem auto 0; 
}

/* FIX LƯỚI GRID: Bắt buộc chia 3 cột */
.related-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 cột đều nhau */
    gap: 30px; 
    max-width: 1100px; /* Căn giữa grid */
    margin: 0 auto;
}

.related-card { 
    display: block; 
    transition: transform 0.3s;
}
.related-card:hover { transform: translateY(-5px); }

/* FIX ẢNH: Ép chiều cao cố định để không bị dài */
.related-thumb { 
    height: 200px; /* Chiều cao cố định */
    overflow: hidden; 
    border-radius: 4px; 
    margin-bottom: 1rem; 
    position: relative; 
    background: #eee;
}
.related-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* Cắt ảnh vừa khung, không méo */
    transition: 0.5s; 
}
.related-card:hover .related-thumb img { transform: scale(1.1); }

.related-title { 
    font-size: 1.1rem; 
    line-height: 1.4; 
    font-weight: 700; 
    color: #111; 
    margin-bottom: 0.5rem;
    
    /* Giới hạn 2 dòng tiêu đề cho gọn */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-card:hover .related-title { color: var(--color-accent); }

.related-date { font-size: 0.85rem; color: #999; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .article-container { padding: 0 20px; }
    .related-grid { 
        grid-template-columns: 1fr 1fr; /* Tablet: 2 cột */
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .related-grid { 
        grid-template-columns: 1fr; /* Mobile: 1 cột */
    }
    .related-thumb { height: 220px; } /* Mobile ảnh cao hơn chút */
    .article-header { padding: 2rem 0 1rem; }
    .article-title { font-size: 2rem; }
}
/* ========================================= */
/* BOTTOM SHARE CTA (KHỐI CHIA SẺ CUỐI BÀI)  */
/* ========================================= */

.bottom-share-cta {
    margin: 3rem 0;
    padding: 2rem;
    background-color: #fcfcfc;
    border: 1px dashed #ccc; /* Viền nét đứt tạo cảm giác "cắt dán" */
    border-radius: 8px;
    text-align: center;
}

.share-cta-text {
    display: block;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.share-buttons-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Tự xuống dòng trên mobile */
}

.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-share:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    color: white; /* Giữ màu chữ trắng */
}

/* Màu từng mạng xã hội */
.btn-share.fb { background-color: #1877F2; }
.btn-share.in { background-color: #0A66C2; }
.btn-share.mail { background-color: #666; }
.btn-share.copy { background-color: var(--color-accent); border: none; cursor: pointer; font-family: var(--font-body); }

/* Responsive Mobile */
@media (max-width: 600px) {
    .share-buttons-row {
        flex-direction: column; /* Xếp dọc trên điện thoại cho dễ bấm */
    }
    .btn-share {
        width: 100%;
        justify-content: center;
    }
}
/* Fix style cho nút Copy dạng Button ở Sticky Bar */
.sticky-share-bar button.share-icon {
    border: 1px solid #eee;
    outline: none;
    cursor: pointer;
    font-size: 1rem; /* Kích thước icon */
    padding: 0;
}
.sticky-share-bar button.share-icon:hover {
    border-color: var(--color-accent);
}
/* ==========================================================================
   8. CUSTOM FORMS & CONTACT PAGE (OPTIMIZED FINAL)
   ========================================================================== */

/* ==========================================================================
   8. CUSTOM FORMS & CONTACT PAGE (FIXED & OPTIMIZED)
   ========================================================================== */

/* --- A. CONTACT FORM 7 GLOBAL STYLES --- */

/* 1. Ẩn thông báo mặc định của CF7 (cho gọn) */
div.wpcf7-response-output {
    margin: 10px 0 0 !important;
    padding: 10px !important;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    background: transparent !important;
    border: none !important;
}
.wpcf7-not-valid-tip { font-size: 0.8rem; margin-top: 5px; display: block; color: #dc3232; }

/* 2. Style chung cho Input & Select */
.form-control, 
select.form-control,
input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 0 20px; /* Padding ngang */
    border: 1px solid #ddd;
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    height: 55px; /* Chiều cao chuẩn đồng bộ (Cao hơn chút cho đẹp) */
    line-height: 55px;
}

/* Hiệu ứng khi bấm vào (Focus) */
.form-control:focus, 
select.form-control:focus,
input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1);
}

/* Textarea (Ô nhập dài) */
textarea.form-control {
    height: auto; 
    padding-top: 15px;
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* 3. Style chuẩn cho Select Box (Dropdown) */
select.form-control {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    padding-right: 40px; 
}
select.form-control option:first-child { color: #999; }


/* --- B. HOMEPAGE NEWSLETTER FORM (Horizontal Fix) --- */

.newsletter-input-group {
    display: flex;
    gap: 10px;
    max-width: 800px; 
    margin: 0 auto;
    position: relative;
    align-items: stretch; /* Căng chiều cao bằng nhau */
}

/* Input Email: Chiếm hết khoảng trống (Quan trọng) */
.newsletter input[type="email"] {
    flex: 1 1 auto; /* Grow: 1, Shrink: 1 */
    width: auto; /* Để flex tự tính toán */
    min-width: 0; /* Fix lỗi flexbox bị tràn */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    height: 55px; 
    padding-left: 25px;
}
.newsletter input[type="email"]::placeholder { color: #ccc; }
.newsletter input[type="email"]:focus { background: rgba(0, 0, 0, 0.5); border-color: var(--color-accent); }

/* Nút Đăng Ký: Chỉ chiếm diện tích vừa đủ chữ */
.newsletter button.btn-submit,
.newsletter input[type="submit"] {
    flex: 0 0 auto; /* Không giãn, không co */
    width: auto; /* Tự động theo chữ */
    background-color: var(--color-accent);
    color: white;
    border: none;
    padding: 0 30px; /* Padding vừa đủ */
    height: 55px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    transition: 0.3s;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.newsletter button.btn-submit:hover,
.newsletter input[type="submit"]:hover {
    background-color: white;
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Responsive: Chuyển sang dọc sớm hơn (Tablet) */
@media (max-width: 768px) {
    .newsletter-input-group {
        flex-direction: column;
        gap: 15px;
        max-width: 100%; /* Full màn hình mobile */
    }
    .newsletter input[type="email"], 
    .newsletter button.btn-submit,
    .newsletter input[type="submit"] {
        width: 100%;
        height: 50px;
    }
}


/* --- C. CONTACT PAGE LAYOUT (Rộng rãi & Thoáng) --- */

/* 1. Nới rộng container */
.contact-section .container {
    max-width: 1280px; /* Rộng hơn nữa cho thoáng */
}

/* 2. Layout Grid */
.contact-grid {
    display: grid;
    grid-template-columns: 4fr 6fr; 
    gap: 60px;
    align-items: flex-start;
}

/* 3. Khối bao quanh Form */
.contact-form-wrapper {
    background: var(--color-bg-offwhite);
    padding: 40px;
    border: 1px solid #eee;
    border-top: 4px solid var(--color-accent);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 4. Nút Gửi Form Liên Hệ */
.contact-form-wrapper .btn-submit {
    width: 100%;
    height: 55px;
    font-size: 1rem;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}
.contact-form-wrapper .btn-submit:hover {
    background-color: var(--color-primary);
}

/* Responsive Trang Liên Hệ */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Về 1 cột dọc */
        gap: 40px;
    }
    .contact-form-wrapper {
        padding: 30px;
    }
}
/* ========================================= */
/* IN-CONTENT RELATED BOX (BÀI VIẾT GỢI Ý)   */
/* ========================================= */

.inline-related-box {
    margin: 2.5rem 0;
    padding: 1.5rem 2rem;
    background-color: #fdfbfb; /* Nền sáng nhẹ */
    border-left: 4px solid var(--color-accent); /* Viền trái màu vàng thương hiệu */
    border-radius: 0 4px 4px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

/* Nhãn nhỏ bên trên */
.inline-related-box .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #999;
    font-family: var(--font-body);
}

/* Tiêu đề bài viết */
.inline-related-box .title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1.3;
    transition: 0.3s;
}

/* Hiệu ứng hover */
.inline-related-box .title:hover {
    color: var(--color-accent);
    padding-left: 5px; /* Chữ trượt nhẹ sang phải */
}

.inline-related-box i {
    font-size: 0.9rem;
    margin-left: 5px;
    color: var(--color-accent);
    transition: 0.3s;
}

.inline-related-box:hover i {
    margin-left: 10px; /* Mũi tên bay đi */
}

/* Responsive Mobile */
@media (max-width: 600px) {
    .inline-related-box {
        padding: 1rem 1.5rem;
    }
    .inline-related-box .title {
        font-size: 1.1rem;
    }
}