/*
Theme Name: Sửa Tủ Lạnh Site Theme
Theme URI: http://suatulanh.site/
Author: Antigravity AI
Author URI: https://gemini.google.com/
Description: Theme WordPress tối ưu SEO, siêu nhẹ, thiết kế Glacier Frost với tông màu xanh đại dương băng sẫm và xanh băng neon phát sáng. Phù hợp cho cổng thông tin sửa tủ lạnh, tích hợp sẵn Mục lục (TOC) và Schema.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suatulanh-site
*/

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* --- Root Variables --- */
:root {
    --bg-dark: #050c18; /* Xanh đại dương băng sẫm */
    --bg-card: rgba(8, 20, 38, 0.75);
    --border-color: rgba(0, 229, 255, 0.15); /* Viền màu xanh băng neon nhạt */
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-white: #ffffff;
    
    /* Gradients & Accent Colors */
    --primary-grad: linear-gradient(135deg, #00e5ff 0%, #00b0ff 100%);
    --glacier-neon: #00e5ff;
    --ice-neon: #00b0ff;
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    --glow-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
    
    /* Layout & Shapes */
    --max-width: 1200px;
    --font-sans: 'Be Vietnam Pro', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --radius: 8px;
}

/* --- Base & Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 229, 255, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 176, 255, 0.08) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    color: var(--glacier-neon);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--ice-neon);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-white);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5em;
    letter-spacing: -0.01em;
}

/* --- Typography Utilities --- */
.gradient-text {
    background: var(--primary-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- Frosted Ice Card Style --- */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 24px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), var(--glow-shadow);
}

/* --- Header & Nav --- */
.site-header {
    background: rgba(5, 12, 24, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-grad);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: var(--glow-shadow);
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 24px;
}

.menu-list {
    display: flex;
    list-style: none;
    gap: 24px;
}

.menu-list a {
    color: var(--text-main);
    font-weight: 500;
    font-size: 15px;
}

.menu-list a:hover,
.menu-list .current-menu-item > a {
    color: var(--glacier-neon);
}

.btn-cta {
    background: var(--primary-grad);
    color: var(--text-white) !important;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--glow-shadow);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 24px;
    cursor: pointer;
}

/* --- Breadcrumbs --- */
.breadcrumbs-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 15px 20px 0;
}

.breadcrumbs {
    font-size: 14px;
    color: var(--text-muted);
    background: rgba(8, 20, 38, 0.4);
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    display: inline-block;
}

.breadcrumbs a {
    color: var(--glacier-neon);
}

.breadcrumbs .separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.15);
}

.breadcrumbs .current {
    color: var(--text-main);
}

/* --- Layout Main --- */
.site-main {
    max-width: var(--max-width);
    margin: 30px auto;
    padding: 0 20px;
}

/* --- Hero Section --- */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 40px;
    position: relative;
}

.hero-tag {
    background: rgba(0, 229, 255, 0.1);
    color: var(--glacier-neon);
    border: 1px solid rgba(0, 229, 255, 0.2);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-desc {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 30px;
}

/* --- Features Grid (Categories) --- */
.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary-grad);
    margin: 10px auto 0;
    border-radius: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

.feature-item {
    text-align: center;
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: inline-block;
}

/* --- Posts / Cards Grid --- */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.post-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.post-card-thumb {
    width: 240px;
    height: 160px;
    background: #081426;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.post-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card:hover .post-card-thumb img {
    transform: scale(1.08);
}

.post-card-category {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--glacier-neon);
    font-weight: 700;
    margin-bottom: 8px;
}

.post-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.post-card-excerpt {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
}

.post-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

/* --- Sidebar --- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.widget {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
}

.widget-title {
    font-size: 18px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.widget ul {
    list-style: none;
}

.widget li {
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
    padding-bottom: 8px;
}

.widget li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- Single Post Detail --- */
.single-container {
    max-width: 900px;
    margin: 0 auto;
}

.post-header {
    margin-bottom: 30px;
    text-align: center;
}

.post-category-tag {
    color: var(--glacier-neon);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}

.post-main-title {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 15px;
}

.post-meta-details {
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.post-featured-image {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-body-content {
    font-size: 17px;
    line-height: 1.8;
}

.post-body-content p {
    margin-bottom: 20px;
}

.post-body-content h2 {
    font-size: 26px;
    margin-top: 40px;
    margin-bottom: 15px;
    border-left: 4px solid var(--glacier-neon);
    padding-left: 12px;
}

.post-body-content h3 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.post-body-content ul, .post-body-content ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.post-body-content li {
    margin-bottom: 8px;
}

.post-body-content blockquote {
    background: rgba(0, 229, 255, 0.03);
    border-left: 4px solid var(--glacier-neon);
    padding: 15px 20px;
    margin: 25px 0;
    font-style: italic;
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Table of Contents (TOC) --- */
.post-toc {
    margin: 30px 0;
    padding: 24px;
    background: rgba(8, 20, 38, 0.9);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}

.toc-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 8px;
}

.toc-title::before {
    content: '📊';
    font-size: 16px;
}

.toc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.toc-item {
    margin-bottom: 12px;
    line-height: 1.4;
}

.toc-item:last-child {
    margin-bottom: 0;
}

.toc-item a {
    color: var(--text-main);
    font-size: 15px;
    transition: all 0.2s ease;
}

.toc-item a:hover {
    color: var(--glacier-neon);
    padding-left: 4px;
}

.toc-level-2 {
    padding-left: 0;
    font-weight: 600;
}

.toc-level-3 {
    padding-left: 20px;
    font-size: 14px;
    font-weight: 400;
}

.toc-level-3 a {
    color: var(--text-muted);
}

/* --- Footer --- */
.site-footer {
    background: #030810;
    border-top: 1px solid var(--border-color);
    padding: 60px 0 30px;
    margin-top: 80px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-grad);
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: var(--text-muted);
}

.footer-column a:hover {
    color: var(--glacier-neon);
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 40px auto 0;
    padding: 20px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

/* --- Responsive Media Queries --- */
@media (max-width: 991px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .site-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #050c18 !important; /* Fix chứa fixed menu mobile */
    }

    .mobile-menu-toggle {
        display: block;
    }
    
    .main-navigation {
        position: fixed;
        top: 73px;
        left: -100%;
        right: 0;
        bottom: 0;
        background: #050c18; /* Nền tối đặc hoàn toàn trên mobile */
        flex-direction: column;
        padding: 40px 24px;
        align-items: center;
        gap: 30px;
        transition: left 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        z-index: 9999;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
        border: none;
    }
    
    .main-navigation.active {
        left: 0;
    }
    
    .menu-list {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        text-align: center;
    }
    
    .menu-list a {
        font-size: 20px;
        display: block;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        color: var(--text-main);
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-desc {
        font-size: 16px;
    }
    
    .single-nav {
        display: none;
    }
}


/* --- ADDITIONAL MOCHI FIXES --- */

/* Related Posts Grid */
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.related-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.related-post-thumb {
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.related-post-card:hover .related-post-thumb {
    border-color: var(--glacier-neon);
}

.post-tags a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}
.post-tags a:hover {
    background: var(--primary-grad);
    color: #fff;
}

/* Mobile responsive layout fixes */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }

    /* Force Grid to Flex on Mobile to prevent grid stretching bug */
    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Stack Horizontal Cards on Mobile */
    .post-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .post-card-thumb {
        width: 100% !important;
        height: 180px !important;
    }

    /* Breadcrumbs mobile wrap fix */
    .breadcrumbs-container {
        padding: 15px 16px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .breadcrumbs {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Single Post Card Containment */
    .single-container {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .post-main-title {
        font-size: 22px !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    .post-featured-image {
        margin-bottom: 20px !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Content Images Containment */
    .post-body-content img,
    .post-body-content figure,
    .post-body-content iframe,
    .post-body-content video {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 576px) {
    .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* --- ADDITIONAL MOCHI LAYOUT & SIDEBAR SQUEEZE FIXES (V2) --- */
.content-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}

.content-grid > div,
.content-grid > article,
.content-grid > aside,
.content-grid > main {
    min-width: 0 !important;
}

.single-container {
    width: 100% !important;
    max-width: 900px !important;
    box-sizing: border-box !important;
}

.post-body-content img,
.post-body-content figure,
.post-body-content iframe,
.post-body-content video,
.post-featured-image img,
.post-body img,
.post-body figure,
.post-body iframe,
.post-body video {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}